<template>
  <div
    style="margin-top: 15px;min-height: 100%;"
    class="main-div"
  >
    <Spin v-show="isSpinShow" fix size="large"/>

    <div>
      <flexbox
        v-loading="loading"
        direction="column"
        align="stretch"
        class="main">
        <div
          v-if="!completed"
          class="main__hd task-hd">

          <flexbox
            class="task-hd__top"
            justify="space-between">
          <span
            v-if="taskData.createUser"
            class="task-hd__top--create"></span>
            <div>
            <span
              v-if="isArchive"
              class="task-hd__top--info">该任务已于 {{ taskData.archiveTime }} 被归档</span>
              <div >

                <div v-if="multiInstanceTaskBtns && multiInstanceTaskBtns.length>0">
                  <Button v-for="item in taskSequence" type="primary" style="margin-bottom: 2px;margin-right: 15px;"
                          @click="action(item,item.alias)">{{ item.name }}
                  </Button>

                  <span v-for="item in multiInstanceTaskBtns">

            <Button style="margin-bottom: 2px;margin-right: 15px;" type="primary"
                    @click="action(item)">{{ item.btnName }}</Button>
          </span>

                </div>

                <div v-if="taskBtns.length>0">
                  <Button v-for="item in taskSequence" type="primary" style="margin-bottom: 2px;margin-right: 15px;"
                          @click="action(item,'sequence')">{{ item.name }}
                  </Button>

                  <span v-for="item in taskBtns">

            <Button type="primary" style="margin-bottom: 2px;margin-right: 15px;"
                    @click="action(item)">{{ item.btnName }}</Button>
          </span>
                  <span>
            <Button type="primary" style="margin-bottom: 2px;margin-right: 15px;" @click="go">
              <Icon type="md-close"/>关闭
            </Button>

          </span>

                </div>
                <span v-else>
        <Button v-for="item in taskSequence" type="primary" style="margin-bottom: 2px;margin-right: 15px;"
                @click="action(item,'sequence')">{{ item.name }}</Button>

          <Button
            type="primary"
            style="margin-bottom: 2px;margin-right: 15px;"
            @click="action('agree')"


          >

            办理</Button>
          <Button type="primary" style="margin-bottom: 2px;margin-right: 15px;" @click="action('informed')"

                  class="xr-btn--green"
          >传阅
          </Button>

          <Button
            type="primary"
            style="margin-bottom: 2px;margin-right: 15px;"
            @click="action('transferTask')"
          >转办
          </Button>
          <Button
            type="primary"
            style="margin-bottom: 2px;margin-right: 15px;"
            class="xr-btn--orange"
            @click="action('backToNode')"
          >退回
          </Button>
          <Button
            class="xr-btn--red "
            type="primary" style="margin-bottom: 2px;margin-right: 15px;" @click="action('invalid')">作废
          </Button>
            <Button type="primary" style="margin-bottom: 2px;margin-right: 15px;" @click="action('flowImage')">流程图
          </Button>
             <Button
               type="primary"
               style="margin-bottom: 2px;margin-right: 15px;"
               @click="action('approvalHistory')"
             >审批历史
          </Button>
          <Button type="primary" style="margin-bottom: 2px;margin-right: 15px;" @click="action('headmap')">热力图
          </Button>
             <el-dropdown
               trigger="click"
               @command="handleCommand">
              <el-button icon="el-icon-more" />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="addNode">添加临时任务</el-dropdown-item>
                <el-dropdown-item command="addSignNode">添加会签</el-dropdown-item>
                <el-dropdown-item command="headmap">热力图</el-dropdown-item>
                <el-dropdown-item command="transactionUrge">特事特办</el-dropdown-item>
                <el-dropdown-item command="print">打印</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

        </span>
              </div>
              <el-button
                v-if="isArchive"
                class="xr-btn--primary"
                icon="wk wk-activation"
                type="primary"
                @click="activateTask">激活</el-button>
              <span
                v-if="isRecycle"
                class="task-hd__top--info">该任务已于 {{ taskData.hiddenTime }} 被放入回收站</span>
<!--              <el-button-->
<!--                v-if="isRecycle && getPermission('restoreTask')"-->
<!--                class="xr-btn&#45;&#45;primary"-->
<!--                icon="wk wk-activation"-->
<!--                type="primary"-->
<!--                @click="recoverTask">恢复</el-button>-->
<!--              <el-button-->
<!--                v-if="isRecycle && getPermission('cleanTask')"-->
<!--                class="xr-btn&#45;&#45;red"-->
<!--                icon="el-icon-delete-solid"-->
<!--                type="primary"-->
<!--                @click="thoroughDeleteTask">彻底删除</el-button>-->
<!--              <el-button-->
<!--                v-if="showArchiveBtn && getPermission('archiveTask')"-->
<!--                class="xr-btn&#45;&#45;green"-->
<!--                icon="wk wk-archive"-->
<!--                type="primary"-->
<!--                @click="moreArchive">归档</el-button>-->
<!--              <el-dropdown-->
<!--                v-if="!isRecycle && getPermission('deleteTask')"-->
<!--                trigger="click"-->
<!--                @command="morkDropdownClick">-->
<!--                <el-button icon="el-icon-more" />-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                  <el-dropdown-item-->
<!--                    :icon="'delete' | wkIconPre"-->
<!--                    command="delete">删除</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--              </el-dropdown>-->
            </div>
          </flexbox>

          <flexbox
            class="task-hd__middle"
            style="margin-top: 10px"
            align="stretch">
            <el-checkbox
              v-model="taskData.checked"
              @change="completeMainTask" />
            <el-tooltip v-if="!nameVinput" :content="taskData.name" effect="dark" placement="top">
              <div
                :class="['task-name', { 'is-checked': taskData.checked }]"
                @click="editTaskName">{{ taskData.name }}</div>
            </el-tooltip>
            <div
              v-else
              class="show-input">
              <el-input
                v-model="taskDataName"
                :maxlength="100"
                size="medium" />
              <div class="btn-box">
                <el-button
                  type="primary"
                  size="mini"
                  @click="submiteTaskName(taskDataName)">保 存</el-button>
                <el-button
                  size="mini"
                  @click="nameVinput = false">取 消</el-button>
              </div>
            </div>
          </flexbox>

          <flexbox class="task-hd__bottom">
            <flexbox-item class="priority">
              <flexbox @click.native="priorityVisible = true">
                <el-popover
                  v-model="priorityVisible"
                  popper-class="no-padding-popover"
                  placement="bottom"
                  trigger="click">
                  <flexbox class="priority-select">
                    <div
                      v-for="(item, index) in priorityList"
                      :key="index"
                      class="priority-select-item"
                      @click="priorityBtn(item, taskData.priority)">
                    <span
                      :style="{ backgroundColor: item.color }"
                      class="priority--icon">{{ item.label }}</span>
                    </div>
                  </flexbox>
                  <span
                    slot="reference"
                    :style="{ backgroundColor: priority.color }"
                    class="priority--icon">{{ priority.label }}</span>
                </el-popover>
                <div class="head-btn__bd">
                  <div class="head-btn__bd--des">优先级</div>
                </div>
              </flexbox>
            </flexbox-item>
            <flexbox-item>
              <xh-user-cell
                :value="taskData.mainUser ? [taskData.mainUser] : []"
                :info-request="ownerListRequest"
                :info-params="ownerListParams"
                :disabled="true"
                style="width: 100%;"
                placement="top"
                radio
                @value-change="mainUserChange">
                <flexbox
                  slot="reference"
                  class="head-btn">
                  <i
                    v-if="!taskData.mainUser"
                    class="wk wk-l-plus head-btn__icon is-null" />
                  <xr-avatar
                    v-else
                    :name="taskData.mainUser ? taskData.mainUser.realname : ''"
                    :size="32"
                    :src="taskData.mainUser ? taskData.mainUser.img : ''"
                    class="user-img" />
                  <div class="head-btn__bd">
                    <div
                      v-if="taskData.mainUser"
                      class="head-btn__bd--title">{{ taskData.mainUser.realname }}</div>
                    <div class="head-btn__bd--des">负责人</div>
                  </div>
<!--                  <i-->
<!--                    v-show="taskData.mainUser && getPermission('setTaskMainUser')"-->
<!--                    class="el-icon-close head-btn__close"-->
<!--                    @click="submiteMainUser(null)" />-->
                </flexbox>
              </xh-user-cell>
            </flexbox-item>
            <flexbox-item>
              <flexbox class="head-btn">
                <i
                  :class="[ taskData.startTime ? 'is-valve' : 'is-null']"
                  class="wk wk-l-time head-btn__icon" />
                <el-date-picker
                  v-model="taskData.startTime"
                  :clearable="false"
                  :disabled="!getPermission('setTaskTime')"
                  :picker-options="startTimeOptions"
                  type="date"
                  value-format="yyyy-MM-dd"
                  @change="timeChange('startTime')" />
                <div class="head-btn__bd">
                  <div
                    v-if="taskData.startTime"
                    class="head-btn__bd--title">{{ taskData.startTime  }}</div>
                  <div class="head-btn__bd--des">开始时间</div>
                </div>
                <i
                  v-show="taskData.startTime"
                  class="el-icon-close head-btn__close"
                  @click="deleteTime('startTime')" />
              </flexbox>
            </flexbox-item>
            <flexbox-item>
              <flexbox class="head-btn">
                <i
                  :class="[ taskData.stopTime ? 'is-valve' : 'is-null']"
                  class="wk wk-l-minus head-btn__icon" />
                <el-date-picker
                  v-model="taskData.stopTime"
                  :clearable="false"
                  :disabled="!getPermission('setTaskTime')"
                  :picker-options="stopTimeOptions"
                  type="date"
                  value-format="yyyy-MM-dd"
                  @change="timeChange('stopTime')" />
                <div class="head-btn__bd">
                  <div
                    v-if="taskData.stopTime"
                    class="head-btn__bd--title">{{ taskData.stopTime  }}</div>
                  <div class="head-btn__bd--des">结束时间</div>
                </div>
                <i
                  v-show="taskData.stopTime"
                  class="el-icon-close head-btn__close"
                  @click="deleteTime('stopTime')" />
              </flexbox>
            </flexbox-item>
          </flexbox>
        </div>

        <flexbox
          v-if="taskData"
          class="main__bd"
          align="stretch">

          <div class="main__bd--left">

            <!-- 其他信息 -->
            <div class="secitons main__bd--right"  >
              <!-- 描述 -->

              <!-- 相关信息 -->
              <div class="section">
                <div class="section__bd">
                  <related-business
                    :margin-left="'0'"
                    :all-data="allData"
                    :show-foot="getPermission('saveTaskRelation')"
                    :show-add="getPermission('saveTaskRelation')"
                    @checkRelatedDetail="checkRelatedDetail"
                    @checkInfos="checkInfos"
                    @unbind="unbindRelatedInfo" />
                </div>
              </div>
               <create :batchId="batchId"></create>

              <el-dialog
                title="转办"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="transferTask.model"
                width="50%">
                <div>

                  <Form ref="transferTask" :model="transferTask" :label-width="120" :rules="transferTaskRuleValidate">
                    <FormItem label="备注/意见" prop="option">
                      <Input v-model="transferTask.option" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                             maxlength="60" show-word-limit/>
                    </FormItem>
                    <FormItem label="转办人">
                      <Button
                        v-if="singleUserData!=null && singleUserData.userNo!=null"
                        v-model="singleUserData"
                        type="primary"
                        style="margin-left: 2px"
                        color="primary"
                        @click="delSingleUsers"
                      >
                        {{ singleUserData.fullname }} &nbsp;<Icon type="md-close"/>

                      </Button>
                      <Button type="error" @click="selectSingleShowUsers">
                        <Icon type="ios-contact"/>
                        处理人
                      </Button>

                    </FormItem>

                  </Form>

                </div>
              </el-dialog>
              <user-single-dialog
                :single-show.sync="singleShow"
                :on-ok="confirmDialogSingleEvent"
                :exist-data="singleUserData"
              />
              <user-multiple-dialog
                :on-ok="confirmDialogEvent"
                :show.sync="show"
                :exist-data="existData"
                :node-index="task.nodeIndex"
                :alias="alias"
              />
              <el-dialog
                title="传阅表单"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="informed.informed"
                width="50%">
                <div>

                  <Form ref="informed" :model="informed" :label-width="120" :rules="informedRuleValidate">
                    <FormItem label="任务标题" prop="taskTitle">
                      <el-input v-model="informed.taskTitle"/>
                    </FormItem>
                    <FormItem label="备注/意见" prop="opinion">
                      <Input maxlength="60" show-word-limit v-model="informed.opinion" type="textarea"
                             :autosize="{minRows: 2,maxRows: 5}"/>

                    </FormItem>
                    <FormItem label="传阅人" prop="usersInfo">
                      <Button
                        v-for="(item,index) in informed.usersInfo"
                        v-model="informed.usersInfo"
                        type="primary"
                        style="margin-left: 2px"
                        color="primary"
                        @click="delCommonUsers(index)"
                      >
                        {{ item.fullname }} &nbsp;<Icon type="md-close"/>

                      </Button>
                      <Button type="error" @click="selectInformedUsers">
                        <Icon type="ios-contact"/>
                        处理人
                      </Button>

                    </FormItem>

                  </Form>


                </div>
                <div slot="footer">
                  <el-button type="primary" @click="informedHandler" :loading="loading">确定</el-button>
                  <el-button @click="handleReset('informed')">取消</el-button>
                </div>
              </el-dialog>

              <el-dialog
                title="备注/意见"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="handlerSequenceModel"
                width="50%">
                <div>
                  <Form ref="taskSequenceForm" :model="taskSequenceForm" :label-width="130"
                        :rules="taskSequenceRuleValidate">

                    <FormItem label="下一个节点" prop="nextNode">
                      <Tag v-for="item in sequenceNode" size="large" color="primary">{{ item.taskName }}</Tag>
                    </FormItem>
                    <FormItem v-for="(item,index) in sequenceNode" :label="item.taskName" prop="usersIds">
                      <Button
                        v-for="(users,userIndex) in item.extObj"
                        v-model="task.usersIds"
                        size="small"
                        type="primary"
                        style="margin-left: 2px"
                        @click="delSequenceUsers(index,userIndex)"
                      >{{ users.fullname }}&nbsp;<Icon
                        type="md-close"
                      />
                      </Button>

                      <p>
                        <Button type="error" @click="selectSequenceUsers(index)">
                          <Icon type="ios-contact"/>

                        </Button>
                      </p>

                    </FormItem>

                    <FormItem v-model="taskSequenceForm.priority" label="优先级" prop="priority">
                      <el-radio v-model="taskSequenceForm.priority" label="50">无</el-radio>
                      <el-radio v-model="taskSequenceForm.priority" label="150">高</el-radio>
                      <el-radio v-model="taskSequenceForm.priority" label="100">中</el-radio>
                      <el-radio v-model="taskSequenceForm.priority" label="80">低</el-radio>

                    </FormItem>

                    <FormItem label="任务标题" prop="taskTitle">
                      <el-input v-model="taskSequenceForm.taskTitle" clearable/>
                    </FormItem>
                    <FormItem label="备注/意见" prop="opinion">
                      <Input v-model="taskSequenceForm.opinion" clearable type="textarea"
                             :autosize="{minRows: 2,maxRows: 5}"></Input>

                    </FormItem>

                  </Form>

                </div>
                <div slot="footer">
                  <el-button type="primary" @click="agreeTaskSequenceHandler('taskSequence')" :loading="loading">确定
                  </el-button>
                  <el-button @click="handleReset('taskSequence')">取消</el-button>
                </div>
              </el-dialog>
              <el-dialog
                title="备注/意见"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="handlerModel"
                width="50%">
                <div>
                  <Form ref="task" :model="task" :label-width="130" :rules="ruleValidate">

                    <FormItem label="下一个节点" prop="nextNode">
                      <Tag v-for="item in task.nextNode" v-model="nextNode" size="large" color="primary">{{ item.taskName
                        }}
                      </Tag>
                    </FormItem>
                    <FormItem v-for="(item,index) in task.nextNode" :label="item.taskName" prop="usersIds">
                      <Button
                        v-for="(users,userIndex) in item.extObj"
                        v-model="task.usersIds"
                        size="small"
                        type="primary"
                        style="margin-left: 2px"
                        @click="delUsers(index,userIndex)"
                      >{{ users.fullname }}&nbsp;<Icon
                        type="md-close"
                      />
                      </Button>

                      <p>
                        <Button type="error" @click="selectUsers(index)">
                          <Icon type="ios-contact"/>

                        </Button>
                      </p>

                    </FormItem>
                    <FormItem v-model="task.priority" label="优先级" prop="priority">
                      <el-radio v-model="task.priority" label="50">无</el-radio>
                      <el-radio v-model="task.priority" label="150">高</el-radio>
                      <el-radio v-model="task.priority" label="100">中</el-radio>
                      <el-radio v-model="task.priority" label="80">低</el-radio>

                    </FormItem>

                    <FormItem label="任务标题" prop="taskTitle">
                      <el-input v-model="task.taskTitle" clearable/>
                    </FormItem>
                    <FormItem label="备注/意见" prop="opinion">
                      <Input maxlength="60" show-word-limit v-model="task.opinion" clearable type="textarea"
                             :autosize="{minRows: 2,maxRows: 5}"/>

                    </FormItem>
                    <FormItem label="最终意见" prop="opinion">
                      <Select v-model="task.bpmVar" style="width:200px">
                        <Option v-for="item in bpmVarList" :value="item.code" :key="item.code">{{ item.name }}</Option>
                      </Select>

                    </FormItem>

                    <FormItem label="常用语" v-if="approval && approval.length>0" >
                      <Tag  v-for="(item ,index) in approval" color="primary"  type="border" @click.native="selectTag(item)">{{item.content}}</Tag>


                    </FormItem>
                  </Form>

                </div>
                <div slot="footer">
                  <el-button type="primary" @click="agreeHandler('task')" :loading="loading">确定</el-button>
                  <el-button @click="handleReset('task')">取消</el-button>
                </div>
              </el-dialog>


              <el-dialog
                title="备注/意见"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="agreeAdHocSubProcess.show"
                width="50%">
                <div>

                  <Form ref="agreeAdHocSubProcess" :model="agreeAdHocSubProcess" :label-width="120" :rules="ruleValidate">
                    <Alert banner closable type="warning">下一个节点勾选那些，实例会创建那些节点。所选择的节点必须设置处理人...</Alert>
                    <FormItem label="下一个节点">
                      <el-checkbox-group v-model="agreeAdHocSubProcess.nextNodeName" @change="handleCheckedNextNodeChange">

                        <el-checkbox v-for="item in agreeAdHocSubProcess.nextNodeNameOptions"

                                     :label="item"
                                     :key="item"
                        >
                          {{item}}
                        </el-checkbox>
                      </el-checkbox-group>


                    </FormItem>
                    <FormItem v-for="(item,index) in agreeAdHocSubProcess.nextNode" :label="item.taskName" prop="usersIds">
                      <Button
                        v-for="(users,userIndex) in item.extObj"
                        v-model="agreeAdHocSubProcess.usersIds"
                        size="small"
                        type="primary"
                        style="margin-left: 2px"
                        @click="delUsers(index,userIndex)"
                      >{{ users.fullname }}&nbsp;<Icon
                        type="md-close"
                      />
                      </Button>

                      <p>
                        <Button type="error" @click="selectAgreeAdHocSubProcessUsers(index)">
                          <Icon type="ios-contact"/>
                        </Button>
                      </p>

                    </FormItem>
                    <FormItem v-model="agreeAdHocSubProcess.priority" label="优先级" prop="priority">
                      <el-radio v-model="agreeAdHocSubProcess.priority" label="50">无</el-radio>
                      <el-radio v-model="agreeAdHocSubProcess.priority" label="150">高</el-radio>
                      <el-radio v-model="agreeAdHocSubProcess.priority" label="100">中</el-radio>
                      <el-radio v-model="agreeAdHocSubProcess.priority" label="80">低</el-radio>

                    </FormItem>

                    <FormItem label="任务标题" prop="taskTitle">
                      <el-input v-model="agreeAdHocSubProcess.taskTitle"/>
                    </FormItem>
                    <FormItem label="备注/意见" prop="option">
                      <Input maxlength="60" show-word-limit v-model="agreeAdHocSubProcess.option" type="textarea"
                             :autosize="{minRows: 2,maxRows: 5}"/>

                    </FormItem>

                  </Form>

                </div>
                <div slot="footer">
                  <el-button type="primary" @click="agreeAdHocSubProcessHandle('agreeAdHocSubProcess')" :loading="loading">
                    确定
                  </el-button>
                  <el-button @click="handleReset('agreeAdHocSubProcess')">取消</el-button>

                </div>
              </el-dialog>

              <el-dialog
                title="热力图"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="headMap.show"
                width="85%">
                <iframe
                  id="iframe"
                  width="100%"
                  style="min-height: 600px"
                  height="100%"
                  frameborder="0"
                  align="center"
                  allowfullscreen="true"
                  allow="autoplay"
                  :src="headMap.src"
                />
                <div slot="footer"/>
              </el-dialog>

              <el-dialog
                title="意见"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="opinion.show"
                width="85%">
                <Table
                  ref="selection"
                  highlight-row
                  height="450"
                  :columns="opinion.tableColumns"
                  :data="opinion.tableData"
                  style="padding-left: 10px;padding-top: 10px"
                />
                <div slot="footer"/>
              </el-dialog>
              <el-dialog
                title="流程图"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="flowImage.show"
                width="85%">
                <iframe
                  id="flowImageframe"
                  width="100%"
                  style="min-height: 600px"
                  height="100%"
                  frameborder="0"
                  align="center"
                  allowfullscreen="true"
                  allow="autoplay"
                  :src="flowImage.src"
                />
                <div slot="footer"/>
              </el-dialog>
              <el-dialog
                title="退回"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="backToNodeForm.show"
                width="50%">
                <Form ref="backToNodeForm" :model="backToNodeForm" :label-width="120" :rules="backToNodFormRuleValidate">

                  <FormItem label="退回节点" prop="newActivityId">
                    <Select v-model="backToNodeForm.newActivityId" style="width:200px" @on-change="backToNodeChange">
                      <Option v-for="item in backToNodeForm.nodeArray" :key="item.id" :value="item.id">{{ item.name }}
                      </Option>
                    </Select>
                    <Button type="error" @click="freedomChoice">
                      自由选择
                    </Button>
                  </FormItem>
                  <FormItem label="处理人">
                    <Button
                      v-if="singleUserData!=null && singleUserData.userNo!=null"
                      v-model="singleUserData"
                      type="primary"
                      style="margin-left: 2px"
                      color="primary"
                      @click="delSingleUsers"
                    >
                      {{ singleUserData.fullname }} &nbsp;<Icon type="md-close"/>

                    </Button>
                    <Button type="error" @click="selectSingleShowUsers">
                      <Icon type="ios-contact"/>
                      处理人
                    </Button>

                  </FormItem>
                  <FormItem v-model="backToNodeForm.priority" label="优先级" prop="priority">
                    <el-radio v-model="backToNodeForm.priority" label="50">无</el-radio>
                    <el-radio v-model="backToNodeForm.priority" label="150">高</el-radio>
                    <el-radio v-model="backToNodeForm.priority" label="100">中</el-radio>
                    <el-radio v-model="backToNodeForm.priority" label="80">低</el-radio>

                  </FormItem>

                  <FormItem label="任务标题" prop="taskTitle">
                    <el-input v-model="backToNodeForm.taskTitle"/>
                  </FormItem>
                  <FormItem label="备注/意见" prop="option">
                    <Input maxlength="60" show-word-limit v-model="backToNodeForm.option" type="textarea"
                           :autosize="{minRows: 2,maxRows: 5}"/>

                  </FormItem>

                </Form>
                <div slot="footer">


                  <el-button type="primary" @click="backToNodeHandler('backToNode')" :loading="loading">确定</el-button>
                  <el-button @click="handleReset('backToNode')">取消</el-button>


                </div>
              </el-dialog>
              <el-dialog
                title="特事特办"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="transactionUrge.show"
                width="50%">
                <Form ref="transactionUrge" :model="transactionUrge" :label-width="120"
                      :rules="transactionUrgeRuleValidate">

                  <FormItem label="选择" prop="newActivityId">
                    <Select v-model="transactionUrge.newActivityId" style="width:200px">
                      <Option v-for="item in transactionUrgeData.nodeArray" :key="item.id" :value="item.id">{{ item.name
                        }}
                      </Option>
                    </Select>

                  </FormItem>
                  <FormItem label="处理人">
                    <Button
                      v-if="singleUserData!=null && singleUserData.userNo!=null"
                      v-model="singleUserData"
                      type="primary"
                      style="margin-left: 2px"
                      color="primary"
                      @click="delSingleUsers"
                    >
                      {{ singleUserData.fullname }} &nbsp;<Icon type="md-close"/>

                    </Button>
                    <Button type="error" @click="selectSingleShowUsers">
                      <Icon type="ios-contact"/>
                      处理人
                    </Button>

                  </FormItem>
                  <FormItem label="备注/意见" prop="option">
                    <Input v-model="transactionUrge.option" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                           maxlength="60" show-word-limit/>

                  </FormItem>
                  <FormItem label="任务标题" prop="taskTitle">
                    <el-input v-model="transactionUrge.taskTitle"/>
                  </FormItem>

                  <FormItem v-model="transactionUrge.priority" label="优先级" prop="priority">
                    <el-radio v-model="transactionUrge.priority" label="50">无</el-radio>
                    <el-radio v-model="transactionUrge.priority" label="150">高</el-radio>
                    <el-radio v-model="transactionUrge.priority" label="100">中</el-radio>
                    <el-radio v-model="transactionUrge.priority" label="80">低</el-radio>

                  </FormItem>

                </Form>
                <div slot="footer">

                  <el-button type="primary" @click="transactionUrgeHandler('transactionUrge')" :loading="loading">确定
                  </el-button>
                  <el-button @click="handleReset('transactionUrge')">取消</el-button>


                </div>
              </el-dialog>
              <el-dialog
                title="添加临时节点"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="addNode.show"
                width="50%">
                <Form ref="addNode" :model="addNode" :label-width="120" :rules="addNodeRuleValidate">

                  <FormItem label="目标节点" prop="nextId">
                    <Select v-model="addNode.nextId" style="width:200px">
                      <Option v-for="item in transactionUrgeData.nodeArray" :key="item.id" :value="item.id">{{ item.name
                        }}
                      </Option>
                    </Select>

                  </FormItem>
                  <FormItem label="处理人">
                    <Button
                      v-if="singleUserData!=null && singleUserData.userNo!=null"
                      v-model="singleUserData"
                      type="primary"
                      style="margin-left: 2px"
                      color="primary"
                      @click="delSingleUsers"
                    >
                      {{ singleUserData.fullname }} &nbsp;<Icon type="md-close"/>

                    </Button>
                    <Button type="error" @click="selectSingleShowUsers">
                      <Icon type="ios-contact"/>
                      处理人
                    </Button>

                  </FormItem>
                  <FormItem label="任务名称" prop="userTaskName">
                    <Input v-model="addNode.userTaskName"/>
                  </FormItem>
                </Form>
                <div slot="footer">

                  <el-button type="primary" @click="addNodeHandler('addNode')" :loading="loading">确定</el-button>
                  <el-button @click="handleReset('addNode')">取消</el-button>

                </div>
              </el-dialog>
              <el-dialog
                title="添加会签节点"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="addSign.show"
                width="50%">
                <Form ref="addSign" :model="addSign" :label-width="120" :rules="addSignRuleValidate">

                  <FormItem label="目标节点" prop="nextId">
                    <Select v-model="addSign.nextId" style="width:200px">
                      <Option v-for="item in transactionUrgeData.nodeArray" :key="item.id" :value="item.id">{{ item.name
                        }}
                      </Option>
                    </Select>

                  </FormItem>

                  <FormItem label="加签类型" prop="parallel">
                    <RadioGroup v-model="addSign.parallel">
                      <Radio label="true">
                        <span>串行</span>
                      </Radio>
                      <Radio label="false">
                        <span>并行</span>
                      </Radio>
                    </RadioGroup>

                  </FormItem>
                  <FormItem label="比例" prop="signScale">
                    <Select v-model="addSign.signScale" style="width:200px">
                      <Option v-for="item in signType" :key="item.lable" :value="item.lable">{{ item.value }}</Option>
                    </Select>

                  </FormItem>
                  <FormItem label="通过" prop="pass">
                    <Select v-model="addSign.pass" style="width:200px">
                      <Option value="next">流转后置节点</Option>
                      <Option value="pre">回退前置节点</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="拒绝" prop="unPass">
                    <Select v-model="addSign.unPass" style="width:200px">
                      <Option value="next">流转后置节点</Option>
                      <Option value="pre">回退前置节点</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="会签人全部参与" prop="allStrage">
                    <RadioGroup v-model="addSign.allStrage">
                      <Radio label="true">
                        <span>是</span>
                      </Radio>
                      <Radio label="false">
                        <span>否</span>
                      </Radio>
                    </RadioGroup>

                  </FormItem>
                  <FormItem label="策略" prop="signType">
                    <RadioGroup v-model="addSign.signType">
                      <Radio label="scale">
                        <span>比例通过制</span>
                      </Radio>
                    </RadioGroup>

                  </FormItem>

                  <FormItem label="处理人">

                    <Button
                      v-for="(item,index) in addSign.usersInfo"
                      v-model="addSign.usersInfo"
                      type="primary"
                      style="margin-left: 2px"
                      color="primary"
                      @click="delCommonUsers(index)"
                    >
                      {{ item.fullname }} &nbsp;<Icon type="md-close"/>

                    </Button>

                    <Button
                      v-if="singleUserData!=null && singleUserData.userNo!=null"
                      v-model="singleUserData"
                      type="primary"
                      style="margin-left: 2px"
                      color="primary"
                      @click="delSingleUsers"
                    >
                      {{ singleUserData.fullname }} &nbsp;<Icon type="md-close"/>

                    </Button>
                    <Button type="error" @click="selectAddSignUsers">
                      <Icon type="ios-contact"/>
                      处理人
                    </Button>

                  </FormItem>
                  <FormItem label="任务名称" prop="userTaskName">
                    <Input v-model="addSign.userTaskName"/>
                  </FormItem>
                </Form>
                <div slot="footer">

                  <el-button type="primary" @click="addSignHandler('addSign')" :loading="loading">确定</el-button>
                  <el-button @click="handleReset('addSign')">取消</el-button>


                </div>
              </el-dialog>

              <el-dialog
                title="添加处理人"
                :close-on-click-modal="false"
                :append-to-body="true"
                :modal-append-to-body="true"
                :visible.sync="addUserTask.model"
                width="50%">
                <div>

                  <Form ref="addUserTask" :model="addUserTask" :label-width="120">
                    <FormItem label="处理人">
                      <Button
                        v-if="singleUserData!=null && singleUserData.userNo!=null"
                        v-model="singleUserData"
                        type="primary"
                        style="margin-left: 2px"
                        color="primary"
                        @click="delSingleUsers"
                      >
                        {{ singleUserData.fullname }} &nbsp;<Icon type="md-close"/>

                      </Button>
                      <Button type="error" @click="selectSingleShowUsers">
                        <Icon type="ios-contact"/>
                        处理人
                      </Button>

                    </FormItem>

                  </Form>

                </div>
                <div slot="footer">
                  <el-button type="primary" @click="addUserTaskHandler" :loading="loading">确定</el-button>
                  <el-button @click="handleReset('addUserTask')">取消</el-button>

                </div>
              </el-dialog>




            </div>
          </div>


        </flexbox>
      </flexbox>

      <c-r-m-full-screen-detail
        :visible.sync="showRelatedDetail"
        :crm-type="relatedCRMType"
        :id="relatedID" />
    </div>

    <screenfull ref="screenfull" class="right-menu-item hover-effect"/>
    <Modal :mask-closable="false" v-model="revisit.model" fullscreen title="流程回放" @on-cancel="cancelModel"
           :transfer="false">
      <iframe width="100%" height='100%' style="min-height: 650px" frameborder='0' align='center' allowfullscreen='true'
              allow="autoplay" id='iframe2' :src="revisit.modelerSrc"></iframe>
      <div slot="footer"></div>
    </Modal>

    <Modal
      :mask-closable="false"
      v-model="faWenAdd.model"
      title="收发文备注/意见"
      width="70%"
      :transfer="false"
    >
      <div>
        <Form ref="faWenAddForm" :model="faWenAddForm" :label-width="130">

          <FormItem label="下一个节点" prop="nextNode">
            <Tag v-for="item in faWenAddForm.sequenceNode" size="large" color="primary">{{ item.name }}</Tag>
          </FormItem>
          <FormItem v-for="(item,index) in faWenAddForm.sequenceNode" :label="item.name" prop="usersIds">
            <Button
              v-for="(users,userIndex) in item.ucUsers"
              v-model="task.usersIds"
              size="small"
              type="primary"
              style="margin-left: 2px"
              @click="delFaWenSequenceUsers(index,userIndex)"
            >{{ users.fullname }}&nbsp;<Icon
              type="md-close"
            />
            </Button>
            <p>
              <Button type="error" @click="selectFaWenSequenceUsers(index)">
                <Icon type="ios-contact"/>
              </Button>
            </p>

          </FormItem>
          <FormItem label="是否持有待办">
            <i-switch v-model="faWenAddForm.completed" size="large">
              <span slot="open">是</span>
              <span slot="close">否</span>
            </i-switch>
          </FormItem>


        </Form>

      </div>
      <div slot="footer">
        <el-button type="primary" @click="fawenAddHandler('flw_fawen_add')" :loading="loading">确定
        </el-button>
        <el-button @click="handleReset('flw_fawen_add')">取消</el-button>
      </div>

    </Modal>
  </div>

</template>

<script>
  import SlideView from '@/components/SlideView'
  import xss from 'xss'
  import {
    workTaskArchiveAPI,
    workTaskRecoverAPI // 激活任务
  } from '@/api/pm/task'
  import {
    editTaskRelationAPI,
    detailsTaskAPI,
    detailsTrashTaskAPI,
    queryLogTaskAPI
  } from '@/api/task/task'
  import {
    queryCommentListAPI,
    deleteCommentAPI,
    setCommentAPI
  } from '@/api/oa/common'
  import {
    workTaskStatusSetAPI,
    workTaskChildStatusSetAPI,
    workTaskTitleSetAPI,
    workTaskDescriptionSetAPI,
    workTaskMainUserSetAPI,
    workTaskTimeSetAPI,
    workTaskOwnerUserSetAPI,
    workTaskOwnerUserDeleteAPI,
    workTaskPrioritySetAPI,
    workTaskDeleteAPI,
    workSubTaskDeleteAPI
  } from '@/api/pm/projectTask'
  // 项目参与人
  import { workWorkOwnerListAPI } from '@/api/pm/project'
  import {
    workTrashRecoverAPI,
    workTrashDeleteAPI
  } from '@/api/pm/recycle'

  import MembersDep from '@/components/SelectEmployee/MembersDep'
  import TagIndex from './Tag/TagIndex'
  import SubTask from './SubTask'

  // emoji
  import Emoji from '@/components/Emoji'
  // 相关信息 - 选中列表
  import RelatedBusiness from '@/components/RelatedBusiness'
  import { XhUserCell } from '@/components/CreateCom'
  import FileCell from '@/views/oa/components/FileCell'
  import { mapGetters } from 'vuex'
  import CommentList from '@/components/CommentList'
  import ReplyComment from '@/components/ReplyComment'
  import moment from 'moment'
  moment.locale('zh_cn')

  import { objDeepCopy } from '@/utils'
  import TaskMixin from './mixins/TaskMixin'

  import {
    listVariable
  } from "@/api/variable/variable";
  import {
    addUserToProcId,
    completeAdHoc,
    completeTask,
    getNextNode,
    getTaskBtn,
    getTaskInfo,
    renderAttachmentByTaskId,
    renderByTaskId,
    getTaskByBusinessKey
  } from '@/api/analy'
  import {
    getApprovalOfMe
  } from "@/api/approval/approval";
  import {
    getNextNodeFaWen,
    getNextNodeAndExecuteActivity,
    completeActivity,
    completeActivityOrNo,
    completeActivitySignOnly,
  } from "@/api/fawen";
  import {addAttachment} from '@/api/loadwfmodule'

  import {
    addNodeOperate,
    addSignOperate,
    changeActivity,
    getBackNode,
    getBackNodeUser,
    getOutgoingFlows,
    getTransactionUrge,
    informedTask,
    invalidTask,
    opinionTask,
    saveform,
    transferTask
  } from '@/api/action'
  import userMultipleDialog from '@/views/components/org/userMultipleDialog'
  import userSingleDialog from '@/views/components/org/userSingleDialog'
  import Screenfull from '@/components/Screenfull'
  import Create from '@/views/crm/invoice/Create2'

  import Footer from '../../../common/footer'

  export default {
    name: 'Task',
    components: {
      Footer,
      userMultipleDialog,
      userSingleDialog,
      Screenfull,
      Create,
      SlideView,
      MembersDep,
      Emoji,
      RelatedBusiness,
      TagIndex,
      CRMFullScreenDetail: () =>
        import('@/components/CRMFullScreenDetail'),
      SubTask,
      FileCell,
      XhUserCell,
      CommentList,
      ReplyComment
    },
    mixins: [TaskMixin],
    props: {
      id: [String, Number],
      isTrash: Boolean,
      detailIndex: Number,
      detailSection: Number,
      noListenerClass: {
        type: Array,
        default: () => {
          return ['el-table__body']
        }
      }
    },
    data() {
      return {
        loading: null,
        canShowDetail: true,
        // 紧急弹出框
        priorityVisible: false,

        /**
         * 限制时间选择`
         */
        startTimeOptions: {
          disabledDate: (time) => {
            if (!this.taskData || !this.taskData.stopTime) {
              return false
            }
            return moment(time).isAfter(this.taskData.stopTime)
          }
        },
        stopTimeOptions: {
          disabledDate: (time) => {
            if (!this.taskData || !this.taskData.startTime) {
              return false
            }
            return moment(time).isBefore(this.taskData.startTime)
          }
        },
        // 是否显示子任务
        addSubtasks: true,
        // 任务名称和编辑切换
        nameVinput: false,
        // 任务名
        taskDataName: '',
        // 是否显示描述
        addDescriptionShow: false,
        // 描述内容
        addDescriptionTextarea: '',
        // 子任务进度
        subTaskDoneNum: 0,
        // 是否显示评论框
        addComments: false,
        allData: {},
        commentsLoading: false,
        // 相关详情的查看
        relatedID: '',
        relatedCRMType: '',
        showRelatedDetail: false,
        // 子任务ID
        subTaskID: null,
        // 任务详情
        taskData: {
          "taskId":1089,
          "name":"Homepage design updates",
          "createUserId":14773,
          "createUser":{
            "userId":14773,
            "img":"/adminFile/down/1310752525070241792",
            "realname":"admin"
          },
          "mainUserId":14776,
          "mainUser":{
            "userId":14776,
            "img":"/adminFile/down/1310135230614605824",
            "realname":"lin"
          },
          "ownerUserId":",14773,",
          "ownerUserList":[
            {
              "userId":14773,
              "img":"/adminFile/down/1310752525070241792",
              "realname":"admin"
            }
          ],
          "createTime":"2021-02-04 13:40:32",
          "updateTime":"2021-02-04 13:41:20",
          "status":1,
          "classId":82,
          "labelId":",48,",
          "description":null,
          "pid":0,
          "startTime":null,
          "stopTime":"2021-02-26",
          "priority":0,
          "workId":22,
          "workName":"Design Request",
          "isTop":0,
          "isOpen":1,
          "orderNum":2,
          "topOrderNum":999,
          "archiveTime":null,
          "ishidden":0,
          "hiddenTime":null,
          "batchId":"376d98c4dbb847598721ee8d0ddfe69e",
          "isArchive":0,
          "childTask":[

          ],
          "file":[

          ],
          "customerList":[

          ],
          "contactsList":[

          ],
          "businessList":[

          ],
          "contractList":[

          ],
          "labelList":[
            {
              "labelId":48,
              "taskId":null,
              "labelName":"Medium",
              "color":"#FF6F6F"
            }
          ],
          "authList":{
            "project":{
              "setWork":true,
              "setTaskOwnerUser":true,
              "deleteTaskFile":true,
              "saveTaskClass":true,
              "deleteTaskClass":true,
              "saveTaskRelation":true,
              "updateClassOrder":true,
              "saveTask":true,
              "setTaskTime":true,
              "setTaskPriority":true,
              "updateChildTask":true,
              "setTaskLabel":true,
              "restoreTask":true,
              "setTaskDescription":true,
              "setChildTaskStatus":true,
              "setTaskMainUser":true,
              "setTaskOrder":true,
              "excelImport":true,
              "deleteChildTask":true,
              "archiveTask":true,
              "cleanTask":true,
              "excelExport":true,
              "setTaskStatus":true,
              "setTaskTitle":true,
              "addChildTask":true,
              "deleteTask":true,
              "updateTaskClass":true,
              "uploadTaskFile":true
            }
          }
        },
        activityList: [],
        fileList: [],
        // 评论列表
        replyList: [],
        faWenAdd: {
          model:false,
          index:0,
        },
        faWenAddForm:{
          sequenceNode: [],
          completed:true,
          taskId:""
        },

        approval:[],
        bpmVarList: [

        ],
        baseUploadURL: process.env.VUE_APP_BASE_BPM_API + "/a1bpmn/api/upload/drl",
        viewImageModelerTmpSrc: '',
        fileList: [],
        activeName: 'form',
        attachmentForm: {
          createBy: '',
          id: '',
          createTime: '',
          procDefId: '',
          taskId: '',
          processInstanceId: '',
          changeContent: '',
          modelKey: '',
          file: [],
        },
        loading: false,
        completed: false,
        fromIndex: false,
        taskId: '',
        processDefinitionId: '',
        processInstanceId: '',
        tableHeight: '',
        alias: '',
        handlerModel: false,
        handlerSequenceModel: false,
        isSpinShow: false,
        show: false,
        singleShow: false,
        jsonData: {},
        editData: {},
        remoteFuncs: {},
        singleUserData: {},
        dynamicData: {},
        taskBtns: [],
        multiInstanceTaskBtns: [],
        taskSequence: [],
        taskSequenceForm: {
          taskTitle: '',
          userInfo: [],
          taskName: '',
          choose: true,
          taskId: '',
          opinion: '',
          formType: 'inner',
          actionName: '',
          action: '',
          nodeType: '',
          usersIds: [],
          userNames: [],
          nextNode: [],
          chooseNode: '',
          chooseNodeUser: '',
          formData: '',
          nodeIndex: 0,
          priority: '50',

        },
        existData: [],
        nextNode: [],
        sequenceNode: [],
        bpmTaskAttachment: [],
        transferTask:
          {
            usersInfo: {},
            option: '',
            taskId: '',
            show: false,
            model: false
          },
        addUserTask:
          {
            usersInfo: {},
            option: '',
            taskId: '',
            show: false,
            model: false
          },
        revisit:
          {
            model: false,
            modelerSrc:''
          },
        headMap:
          {
            show: false,
            src: '',
            base: process.env.VUE_APP_BASE_BPM_API + '/head-map/index.html?processefinitionId='
          },
        opinion:
          {
            show: false,
            tableColumns: [
              {
                title: '任务名称',
                key: 'nodeName'
              },
              {
                title: '创建时间',
                key: 'createTime'
              },
              {
                title: '审批时间',
                key: 'completeTime'
              },
              {
                title: '执行人',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  if (node.a1FlowTaskTrajectoryEntity) {
                    html = node.a1FlowTaskTrajectoryEntity.userName
                  } else {
                    html = node.auditor
                  }
                  if (!html) {
                    if (node.identityLinks) {
                      html = node.identityLinks
                    }

                  }
                  return h('span', html)
                }
              },
              {
                title: '任务标题',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.title
                  return h('span', html)
                }
              },
              {
                title: '备注/意见',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.opinion
                  return h('span', html)
                }
              },
              {
                title: '状态说明',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.statusVal
                  return h('span', html)
                }
              }

            ],
            tableData: []
          },
        flowImage:
          {
            show: false,
            src: '',
            base: process.env.VUE_APP_BASE_BPM_API + '/view/tab.html?fireHoverAction=true&table=false' + '&instId='
          },
        transactionUrge:
          {
            show: false,
            newActivityId: '',
            operate: 'transactionUrge',
            taskTitle: '',
            taskId: '',
            option: '',
            priority: '50',
            usersInfo: {}
          },
        transactionUrgeData: {
          nodeArray: []
        },
        addNode: {
          show: false,
          nextId: '',
          userTaskName: ''
        },
        signType: [
          {lable: '10', value: '10%'},
          {lable: '20', value: '20%'},
          {lable: '30', value: '30%'},
          {lable: '40', value: '40%'},
          {lable: '50', value: '50%'},
          {lable: '60', value: '60%'},
          {lable: '70', value: '70%'},
          {lable: '80', value: '80%'},
          {lable: '90', value: '90%'},
          {lable: '100', value: '100%'}
        ],
        addSign: {
          show: false,
          all: false,
          parallel: 'false',
          allStrage: 'false',
          doUserId: '',
          pass: 'next',
          nextId: '',
          signScale: '',
          signType: 'scale',
          unPass: 'next',
          userTaskName: '',
          usersInfo: []

        },
        sequence: {
          users: []
        },
        addSignRuleValidate: {
          nextId: [
            {required: true, message: '目标节点必须填写', trigger: 'blur'}
          ],
          signType: [
            {required: true, message: '策略必填', trigger: 'blur'}
          ],
          signScale: [
            {required: true, message: '比例必填', trigger: 'blur'}
          ],
          userTaskName: [
            {required: true, message: '任务名称必填', trigger: 'blur'}
          ]
        },
        informed: {
          show: false,
          informed: false,
          usersInfo: [],
          opinion: '',
          taskTitle: '',
          taskId: ''

        },
        agreeAdHocSubProcess: {
          show: false,
          usersIds: [],
          userNames: [],
          nextNode: [],
          nextNodeName: [],
          nextNodeNameOptions: [],
          taskId: "",
          usersInfo: [],
          nodeIndex: 0,
          priority: '50',
          taskTitle: '',
          option: '',
          chooseNode: '',
          chooseNodeUser: '',
        },
        backToNodeForm: {
          show: false,
          usersInfo: [],
          option: '',
          taskTitle: '',
          taskId: '',
          priority: '50',
          newActivityId: '',
          operate: 'backToNode',
          nodeArray: []
        },
        backToNodFormRuleValidate: {
          newActivityId: [
            {required: true, message: '退回节点必须填写', trigger: 'blur'}
          ],
          option: [
            {required: true, message: '意见必须填写', trigger: 'blur'}
          ]
        },
        scopeType: "",
        batchId: "",
        monitor: false,

        tmpTaskInfo: {taskTitle: '',},
        task: {
          taskName: '',
          bpmVar: '',
          taskId: '',
          opinion: '',
          formType: 'inner',
          actionName: '',
          action: '',
          nodeType: '',
          usersIds: [],
          userNames: [],
          nextNode: [],
          chooseNode: '',
          chooseNodeUser: '',
          formData: '',
          nodeIndex: 0,
          priority: '50',
          taskTitle: ''

        },
        ruleValidate: {
          option: [
            {required: true, message: '意见必须填写', trigger: 'blur'}
          ]
        },
        taskSequenceRuleValidate: {
          opinion: [
            {required: true, message: '意见必须填写', trigger: 'blur'}
          ]
        },
        backToNodeRuleValidate: {
          opinion: [
            {required: true, message: '意见必须填写', trigger: 'blur'}
          ]
        },

        informedRuleValidate: {
          taskTitle: [
            {required: true, message: '标题必须填写', trigger: 'blur'}
          ],
          opinion: [
            {required: true, message: '意见必须填写', trigger: 'blur'}
          ]

        },
        transferTaskRuleValidate: {
          usersInfo: [
            {required: true, message: '转办人必须填写', trigger: 'blur'}
          ],
          option: [
            {required: true, message: '意见必须填写', trigger: 'blur'}
          ]

        },
        transactionUrgeRuleValidate: {
          newActivityId: [
            {required: true, message: '节点必须填写', trigger: 'blur'}
          ],
          usersInfo: [
            {required: true, message: '人员必须填写', trigger: 'blur'}
          ],
          option: [
            {required: true, message: '意见必须填写', trigger: 'blur'}
          ]

        },
        addNodeRuleValidate: {
          userTaskName: [
            {required: true, message: '任务名称必填', trigger: 'blur'}
          ],
          nextId: [
            {required: true, message: '目标节点必填', trigger: 'blur'}
          ]

        }
      }
    },
    computed: {
      ...mapGetters(['userInfo']),
      priority() {
        if (this.taskData.priority == 0 || !this.taskData.priority) {
          return this.priorityList[3] // 默认读取 priorityList 返回
        }
        return this.getFlowPriorityColor(this.taskData.priority)
      },

      /**
       * 是归档
       */
      isArchive() {
        return this.taskData.isArchive == 1 && this.taskData.ishidden != 1
      },

      /**
       * 是回收站
       */
      isRecycle() {
        return this.taskData.ishidden == 1
      },

      /**
       * 展示归档
       */
      showArchiveBtn() {
        return this.workId && !this.isArchive && !this.isRecycle
      },

      /**
       * 子任务完成进度
       */
      subTaskProgress() {
        if (this.subTaskDoneNum == 0) {
          return 0
        }
        return parseInt(
          (this.subTaskDoneNum / this.taskData.childTask.length) * 100
        )
      },

      ownerListRequest() {
        return this.workId ? workWorkOwnerListAPI : null
      },

      ownerListParams() {
        return this.workId ? { workId: this.workId } : null
      },

      /**
       * 项目ID 说明是项目
       */
      workId() {
        return this.taskData.workId
      },

      /**
       * 标签
       */
      labelList() {
        if (!this.taskData) {
          return null
        }
        return this.taskData.labelList || []
      }
    },
    watch: {
      id: function(val) {
        this.initInfo()
        this.getDetail()
        this.getCommentList()
        this.getActivityList()
      },

      labelList(newValue, oldValue) {
        if (oldValue && newValue) {
          this.$emit('on-handle', {
            type: 'change-label',
            value: newValue,
            index: this.detailIndex,
            section: this.detailSection
          })
        }
      },

      addDescriptionTextarea(val) {
        this.$refs.sideView.isEditClose = !!(val && val.length > 0)
      }
    },
    mount() {

    },

    created() {
      this.activeName = 'form'
      var query = this.$route.query
      var queryTaskId = query.taskId;
      var monitor = query.monitor;
      if (monitor) {
        this.monitor = monitor;
      }
      if (query.taskId) {
        queryTaskId = query.taskId;
        this.batchId = query.taskId;
      }
      if(queryTaskId){
        getTaskByBusinessKey(queryTaskId).then((response) => {
          if(response.code==0){
            this.taskId=response.taskId
            this.task.taskId =  this.taskId
            this.completed=response.completed
            if(!this.completed){
              this.scopeType = query.scopeType
              this.initData();
            }
          }
        });
      }






    },
    props: {
      taskParam: {
        type: String,
        default: ""
      }
    },
    watch: {
      taskParam() {
        this.activeName = 'form'

        if (this.taskParam) {
          this.taskId = this.taskParam
          this.task.taskId = this.taskParam
          this.fromIndex = true;
          this.initData();

        } else {

          this.jsonData = {}
          this.editData = {}
          this.fromIndex = false;
          this.restartShow()

        }

      },
      jsonData: {
        handler(newValue, oldValue) {
          if (newValue) {
            this.getFormData()
          }
        },
        deep: true
      }
    },

    methods: {
      handleCommand(command) {
        switch (command) {
          case 'addNode':
            this.action('addNode')
            break
          case 'addSignNode':
            this.action('addSignNode')
            break
          case 'headmap':
            this.action('headmap')
            break
          case 'transactionUrge':
            this.action('transactionUrge')
            break
          case 'print':
            this.action('print')
            break
          default:
            return
        }
      },
      /** 查询内置变量列表 */
      getBpmVarList() {
        listVariable({ pageNum: 1,
          pageSize: 1000,}).then(response => {
          this.bpmVarList = response.data;
        });
      },
      cancelModel: function () {
        this.revisit.model = false;

      },
      handleTabClick(tab, event) {
        if (tab.name == 'attachment') {
          this.renderAttachmentByTaskId(this.taskId)

        }
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["attachmentForm"].validate(valid => {
          var formData = new FormData();//new一个formData事件
          for (var i = 0; i < this.attachmentForm.file.length; i++) {
            formData.append('files', this.attachmentForm.file[i]);
          }
          formData.append("procDefId", this.attachmentForm.procDefId);
          formData.append("changeContent", this.attachmentForm.changeContent);
          formData.append("modelKey", this.modelKey);
          if (this.attachmentForm.id) {
            formData.append("id", this.attachmentForm.id);
          }
          if (this.attachmentForm.taskId) {
            formData.append("taskId", this.attachmentForm.taskId);
          }
          if (this.attachmentForm.processInstanceId) {
            formData.append("processInstanceId", this.attachmentForm.processInstanceId);
          }

          if (valid) {
            addAttachment(formData).then(response => {
              if (response.code == 0) {
                this.attachmentForm.id = response.msg
                this.msgSuccess("操作成功");
              }

            });
          }
        });
      },
      handleRemove(file, fileList) {
        this.attachmentForm.file = fileList
      },
      handlePreview(file) {
      },
      uploadform: function (file) {
        if (!this.attachmentForm.file) {
          this.attachmentForm.file = []
        }
        this.attachmentForm.file.push(file)
      },
      /* 上传文件操作 */
      upFile(res, file) {
      },
      restartShow: function () {
        this.handlerModel = false
        this.agreeAdHocSubProcess.show = false
        this.headMap.show = false
        this.opinion.show = false
        this.flowImage.show = false
        this.backToNodeForm.show = false
        this.transactionUrge.show = false
        this.addNode.show = false
        this.addSign.show = false
      },
      initData: function () {
        this.getTaskInfo(this.taskId)
        this.getTaskBtn(this.taskId)
        this.renderAttachmentByTaskId(this.taskId)

        if (this.scopeType) {

        } else {
          this.getNextNode()
        }
   //     this.getFormData();
        this.task.opinion = '';
        this.taskSequenceForm.opinion = '';
        this.agreeAdHocSubProcess.opinion = '';
      },
      triggerRuleValidate: function () {

      },
      handleCheckedNextNodeChange: function (data) {
      },
      freedomChoice: function () {
        getTransactionUrge(this.taskId).then((response) => {
          if (response.code == 0) {
            this.backToNodeForm.nodeArray = response.data
          }
        })
      },
      backToNodeChange: function (nodeId) {
        getBackNodeUser(this.taskId, nodeId).then((response) => {
          if (response.code == 0) {
            if (response.data && response.data.length > 0) {
              if (response.data[0].assigneeName && response.data[0].assignee) {
                var assigneeName = response.data[0].assigneeName
                var assignee = response.data[0].assignee
                this.singleUserData = {'userNo': assignee, 'fullname': assigneeName}
                this.backToNodeForm.usersInfo = this.singleUserData
              } else {
                this.singleUserData = {}
                this.backToNodeForm.usersInfo = {}
              }
            } else {
              this.singleUserData = {}
              this.backToNodeForm.usersInfo = {}
            }
          }
        })
      },
      confirmDialogEvent: function (data) {
        if (data) {
          switch (this.alias) {
            case 'agree':// 普通任务正常办理
              this.task.nextNode[this.task.nodeIndex].extObj = data
              break
            case 'informed':
              this.informed.usersInfo = data
              this.existData = data
              break
            case 'transferTask':
              this.transferTask.usersInfo = data
              this.existData = data
              break
            case 'transactionUrge':
              this.transactionUrge.usersInfo = data
              this.existData = data
              break
            case 'agreeAdHocSubProcess':
              this.agreeAdHocSubProcess.nextNode[this.task.nodeIndex].extObj = data
              break
            case 'addSignNode':
              this.addSign.usersInfo = data
              this.existData = data
              break
            case 'sequence':
              this.sequence.users = data
              this.sequenceNode[0].extObj = data
              this.taskSequence.userInfo = data;
              break
            case 'flw_fawen_add'://发文下发任务
              this.existData = data
              this.faWenAddForm.sequenceNode[this.faWenAdd.index].ucUsers=data
                  break;
            default:
              this.task.nextNode[this.task.nodeIndex].extObj = data
              break
          }
        }
      },
      confirmDialogSingleEvent: function (data) {
        if (data) {
          this.singleUserData = data
        }
      },
      confirmInformedDialogEvent: function (data) {
        if (data) {
        }
      },

      selectUsers: function (index) {
        this.task.nodeIndex = index

        var users = this.task.nextNode[index].extObj
        this.existData = users
        this.show = true

      },
      selectSequenceUsers: function (index) {
        var users = this.sequenceNode[0].extObj;
        this.existData = []
        if (users) {
          this.existData = users
        }
        this.show = true
      },
      selectFaWenSequenceUsers: function (index) {
        var users = this.faWenAddForm.sequenceNode[index].ucUsers;
        this.alias="flw_fawen_add"
        this.faWenAdd.index=index
        this.existData = []
        if (users) {
          this.existData = users
        }
        this.show = true
      },
      delFaWenSequenceUsers: function (index, userIndex) {
        this.faWenAddForm.sequenceNode[index].ucUsers.splice(userIndex, 1)
      },

      selectAddSignUsers: function () {
        try {
          this.existData = this.addSign.usersInfo;

        } catch (e) {
          this.existData = []
        }
        this.show = true
      },
      selectInformedUsers: function () {
        try {
          this.existData = this.informed.usersInfo;

        } catch (e) {
          this.existData = []
        }
        this.show = true
      },
      selectAgreeAdHocSubProcessUsers: function (index) {
        this.task.nodeIndex = index;
        try {
          this.existData = this.agreeAdHocSubProcess.nextNode[index].extObj

        } catch (e) {
          this.existData = []
        }
        this.show = true
      },
      selectSingleShowUsers: function () {
        this.singleShow = true
      },
      delUsers: function (index, userIndex) {
        this.task.nextNode[index].extObj.splice(userIndex, 1)
      },
      delSequenceUsers: function (index, userIndex) {
        this.sequenceNode[0].extObj.splice(userIndex, 1)
      },
      delCommonUsers: function (index) {
        this.informed.usersInfo.splice(index, 1)
        this.addSign.usersInfo.splice(index, 1)
        this.existData.splice(index, 1)
      },
      delSingleUsers: function (index) {
        this.singleUserData = {}
      },
      getFormData: function () {
        if (this.$refs.generateForm) {
          this.$refs.generateForm.getData().then(data => {
            this.task.formData = JSON.stringify(data)
            return data
          }).catch(e => {
          })
        }

      },
      backToNodeHandler: function () {
        new Promise((resolve, reject) => {
          if (this.singleUserData && this.singleUserData.userNo) {
            this.$refs['backToNodeForm'].validate((valid) => {
              if (valid) {
                const obj = JSON.parse(JSON.stringify(this.backToNodeForm))
                delete (obj['show'])
                delete (obj['nodeArray'])
                delete (obj['usersInfo'])
                obj['userId'] = this.singleUserData.userNo
                obj['userName'] = this.singleUserData.fullname
                obj['taskId'] = this.taskId
                delete (obj['usersInfo'])
                this.loading = true
                changeActivity(obj).then((response) => {
                  if (response.code == 0) {
                    this.go()
                  } else {
                    this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});

                  }
                  this.loading = false
                })
              } else {

              }
            })
          } else {
            that.$message({message: '请选择处理人', type: 'warning', customClass: 'zZindex'});
          }
        })
      },
      transactionUrgeHandler: function () {
        new Promise((resolve, reject) => {
          if (this.singleUserData && this.singleUserData.userNo) {
            this.$refs['transactionUrge'].validate((valid) => {
              if (valid) {
                this.changeActivityAction()
              } else {

              }
            })
          } else {
            this.$message({"duration": '800', message: '请选择处理人', type: 'warning', customClass: 'zZindex'});

          }
        })
      },
      afterAddSignHandler: function () {
        this.addSign.all = false
        this.addSign.parallel = 'false'
        this.addSign.allStrage = 'false'
        this.addSign.doUserId = ''
        this.addSign.pass = 'next'
        this.addSign.nextId = ''
        this.addSign.signScale = ''
        this.addSign.signType = 'scale'
        this.addSign.unPass = 'next'
        this.addSign.userTaskName = ''
        this.addSign.usersInfo = []
      },
      addSignHandler: function () {
        this.loading = false;
        new Promise((resolve, reject) => {
          if (this.addSign.usersInfo && this.addSign.usersInfo.length > 0) {
            this.$refs['addSign'].validate((valid) => {
              if (valid) {
                const obj = JSON.parse(JSON.stringify(this.addSign))
                delete (obj['show'])
                obj['taskId'] = this.taskId
                this.loading = true;
                addSignOperate(obj).then((response) => {
                  if (response.code == 0) {
                    this.$message({"duration": '800', message: '操作成功', type: 'success', customClass: 'zZindex'});
                    this.addSign.show = false
                    this.afterAddSignHandler()
                    this.go();
                  } else {
                    this.$message({"duration": '800', message: response.msg, type: 'success', customClass: 'zZindex'});

                  }
                  this.loading = false;
                })
              } else {

              }
            })
          } else {
            this.$message({"duration": '800', message: '请选择处理人', type: 'warning', customClass: 'zZindex'});
          }
        })
      },
      addNodeHandler: function () {
        try {
          this.loading = false;

          new Promise((resolve, reject) => {
            if (this.singleUserData && this.singleUserData.userNo) {
              this.$refs['addNode'].validate((valid) => {
                if (valid) {
                  // addNodeOperate
                  const obj = JSON.parse(JSON.stringify(this.addNode))
                  delete (obj['show'])
                  obj['taskId'] = this.taskId
                  obj['users'] = this.singleUserData.userNo
                  this.loading = true;
                  addNodeOperate(obj).then((response) => {
                    if (response.code == 0) {
                      this.$message({"duration": '800', message: '操作成功', type: 'success', customClass: 'zZindex'});
                      this.addNode.show = false
                      this.go();
                    } else {
                      this.$message({
                        "duration": '800',
                        message: response.msg,
                        type: 'warning',
                        customClass: 'zZindex'
                      });
                    }
                    this.loading = false;
                  })
                } else {

                }
              })
            } else {
              this.$message({"duration": '800', message: '请选择处理人', type: 'warning', customClass: 'zZindex'});

            }
          })
        } finally {
          this.loading = false;

        }

      },
      changeActivityAction: function () {
        this.loading = false;
        const obj = JSON.parse(JSON.stringify(this.transactionUrge))
        delete (obj['show'])
        obj['userId'] = this.singleUserData.userNo
        obj['userName'] = this.singleUserData.fullname
        obj['taskId'] = this.taskId
        delete (obj['usersInfo'])
        this.loading = true;
        changeActivity(obj).then((response) => {
          if (response.code == 0) {
            this.go()
          } else {
            this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});

          }
          this.loading = false;
        })
      },
      completeSequenceTask: function () {
        this.loading = false;
        new Promise((resolve, reject) => {
          if (this.sequenceNode[0]) {
            this.taskSequenceForm.chooseNode = this.sequenceNode[0].chooseNode
            this.taskSequenceForm.chooseNodeUser = this.sequenceNode[0].chooseNodeUser
          }

          this.taskSequenceForm.taskId = this.task.taskId;
          this.taskSequenceForm.formData = this.task.formData
          this.loading = true;
          completeTask(this.taskSequenceForm).then((response) => {
            if (response.code == 0) {
              this.handlerSequenceModel = false;
              this.go()
            } else {
              this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});

            }
            this.loading = false;

          })
        })
      },
      fawenAddHandler:function(){
        this.loading = false;
        getNextNodeAndExecuteActivity(this.faWenAddForm).then((response) => {
          if (response.code == 0) {
            this.faWenAdd.model = false;
            this.go()
          } else {
            this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});

          }

        })


      },
      agreeTaskSequenceHandler: function () {
        //taskSequence
        this.loading = false;
        this.$refs['taskSequenceForm'].validate((valid) => {
          if (valid) {
            var nextNodeStr = ''
            var nextNodeStrUser = ''
            for (var i = 0; i < this.sequenceNode.length; i++) {
              nextNodeStr += this.sequenceNode[i].taskId
              if (i < this.sequenceNode.length - 1) {
                nextNodeStr += ','
              }

              if (this.sequenceNode[i].extObj) {
                for (var j = 0; j < this.sequenceNode[i].extObj.length; j++) {
                  nextNodeStrUser += this.sequenceNode[i].extObj[j].userNo
                  if (j < this.sequenceNode[i].extObj.length - 1) {
                    nextNodeStrUser += ','
                  }
                }
                if (this.sequenceNode.length > 1 && i < this.sequenceNode.length - 1) {
                  nextNodeStrUser += '_'
                }
              }
            }
            if (this.sequenceNode && this.sequenceNode[0]) {
              this.sequenceNode[0].chooseNode = nextNodeStr
              this.sequenceNode[0].chooseNodeUser = nextNodeStrUser
            }
            const that = this
            setTimeout(function () {
              that.completeSequenceTask()
            }, 300)
          } else {
            this.$message({"duration": '800', message: '表单校验不通过', type: 'warning', customClass: 'zZindex'});

          }
        })
      },
      agreeAdHocSubProcessHandle: function () {
        this.loading = false;
        this.$refs['agreeAdHocSubProcess'].validate((valid) => {
          var nextNodeName = this.agreeAdHocSubProcess.nextNodeName
          if (valid) {
            var nextNodeStr = ''
            var nextNodeStrUser = ''
            for (var i = 0; i < this.nextNode.length; i++) {
              var taskName = this.nextNode[i].taskName
              var flag = false;
              for (var j = 0; j < nextNodeName.length; j++) {
                if (nextNodeName[j] == taskName) {
                  flag = true;
                  break
                }
              }
              ;


              if (flag) {
                nextNodeStr += this.nextNode[i].taskId
                if (i < this.nextNode.length - 1) {
                  nextNodeStr += ','
                }

                if (this.nextNode[i].extObj) {
                  for (var j = 0; j < this.nextNode[i].extObj.length; j++) {
                    nextNodeStrUser += this.nextNode[i].extObj[j].userNo
                    if (j < this.nextNode[i].extObj.length - 1) {
                      nextNodeStrUser += ','
                    }
                  }
                  if (this.nextNode.length > 1 && i < this.nextNode.length - 1) {
                    nextNodeStrUser += '_'
                  }
                }
              }
            }

            var userNodeReg = /,$/gi;//
            var userReg = /_$/gi;//
            nextNodeStrUser = nextNodeStrUser.replace(userReg, "");
            nextNodeStr = nextNodeStr.replace(userNodeReg, "");
            this.agreeAdHocSubProcess.chooseNode = nextNodeStr.replace(userReg, "");
            this.agreeAdHocSubProcess.chooseNodeUser = nextNodeStrUser
            const that = this
            setTimeout(function () {
              that.completeAdHoc()
            }, 300)
          } else {
          }
        })
      },
      selectTag(data){
         this.task.opinion=data.content
      },
      agreeHandler: function () {
        this.loading = false;
        this.$refs['task'].validate((valid) => {
          if (valid) {
            var nextNodeStr = ''
            var nextNodeStrUser = ''
            for (var i = 0; i < this.nextNode.length; i++) {
              nextNodeStr += this.nextNode[i].taskId
              if (i < this.nextNode.length - 1) {
                nextNodeStr += ','
              }

              if (this.nextNode[i].extObj) {
                for (var j = 0; j < this.nextNode[i].extObj.length; j++) {
                  nextNodeStrUser += this.nextNode[i].extObj[j].userNo
                  if (j < this.nextNode[i].extObj.length - 1) {
                    nextNodeStrUser += ','
                  }
                }
                if (this.nextNode.length > 1 && i < this.nextNode.length - 1) {
                  nextNodeStrUser += '_'
                }
              }
            }
            this.task.chooseNode = nextNodeStr
            this.task.chooseNodeUser = nextNodeStrUser
            const that = this
            this.loading = true;
            setTimeout(function () {

              that.completeTask();
              that.loading = false;
            }, 300)
          } else {
            this.handlerModel = true
          }
        })
      },
      informedTask: function () {
        this.loading = false;
        new Promise((resolve, reject) => {
          this.informed.taskId = this.taskId
          this.$refs['informed'].validate((valid) => {
            if (valid) {
              this.informedTaskAction()
            } else {

            }
          })
        })
      },
      transferTaskAction: function () {
        this.loading = false;
        new Promise((resolve, reject) => {
          this.transferTask.taskId = this.taskId
          if (this.singleUserData && this.singleUserData.userNo) {
            this.$refs['transferTask'].validate((valid) => {
              if (valid) {
                this.doTransferTaskAction()
              } else {

              }
            })
          } else {
            this.$message({"duration": '800', message: '请选择转办人', type: 'warning', customClass: 'zZindex'});

          }
        })
      },
      addUserTaskAction: function () {
        this.loading = false;
        new Promise((resolve, reject) => {
          this.addUserTask.taskId = this.taskId
          if (this.singleUserData && this.singleUserData.userNo) {
            this.$refs['addUserTask'].validate((valid) => {
              if (valid) {
                this.doAddUserTaskAction()
              } else {

              }
            })
          } else {
            this.$message({"duration": '800', message: '请选择处理人', type: 'warning', customClass: 'zZindex'});

          }
        })
      },
      afterInformedTaskAction: function () {
        this.informed.informed = false
        this.informed.opinion = ''
        this.informedReset()
        this.$message({"duration": '800', message: '传阅成功', type: 'success', customClass: 'zZindex'});
        this.$refs.screenfull.getRunCommuListCount();
      },
      afterTransferTaskAction: function () {
        this.go()
      },
      informedTaskAction: function () {
        this.loading = false;
        const obj = JSON.parse(JSON.stringify(this.informed))
        delete (obj['show'])
        delete (obj['informed'])
        this.loading = true;
        informedTask(obj).then((response) => {
          if (response.code == 0) {

            this.afterInformedTaskAction()
          } else {
            this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});

          }
          this.loading = false;
        })
      },
      doAddUserTaskAction: function () {
        this.loading = false;
        const obj = JSON.parse(JSON.stringify(this.addUserTask))
        obj['usersInfo'] = this.singleUserData
        delete (obj['show'])
        delete (obj['model'])
        var userNo = obj.usersInfo.userNo;
        var taskId = obj.taskId

        addUserToProcId(taskId, userNo).then((response) => {
          if (response.code == 0) {
            this.$message({"duration": '800', message: '添加处理人', type: 'success', customClass: 'zZindex'});
            this.addUserTask.model = false
            const that = this
            this.loading = true;
            setTimeout(function () {
              that.handleAddUserTaskReset()
              that.afterTransferTaskAction()
              that.loading = false;
            }, 300)
          } else {
            this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});


          }
        })
      },
      doTransferTaskAction: function () {
        this.loading = false;
        const obj = JSON.parse(JSON.stringify(this.transferTask))
        obj['usersInfo'] = this.singleUserData
        delete (obj['show'])
        delete (obj['model'])
        transferTask(obj).then((response) => {
          if (response.code == 0) {
            this.$message({"duration": '800', message: '转办成功', type: 'success', customClass: 'zZindex'});
            this.transferTask.model = false
            const that = this
            this.loading = true;
            setTimeout(function () {
              that.afterTransferTaskAction()
              that.loading = false;
            }, 300)
          } else {
            this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});


          }
        })
      },
      completeTask: function () {
        this.loading = false;
        new Promise((resolve, reject) => {
          const objB = JSON.parse(JSON.stringify(this.task))
          objB['monitor'] = this.monitor
          delete (objB['usersIds'])
          delete (objB['userNames'])
          delete (objB['nextNode'])

          completeTask(objB).then((response) => {
            if (response.code == 0) {
              this.go()
            } else {
              this.$message({"duration": '800', message: response.msg, type: 'success', customClass: 'zZindex'});

            }
          })
        })
      },
      /**
       * 完成AdHoc任务
       */
      completeAdHoc: function () {
        this.loading = false;
        new Promise((resolve, reject) => {
          const objB = JSON.parse(JSON.stringify(this.agreeAdHocSubProcess))
          delete (objB['usersIds'])
          delete (objB['userNames'])
          delete (objB['nextNode'])
          objB["formData"] = this.task.formData
          objB["taskId"] = this.task.taskId
          objB["opinion"] = objB['option']
          this.loading = true
          completeAdHoc(objB).then((response) => {
            if (response.code == 0) {
              this.go()
            } else {
              this.$message({"duration": '800', message: response.msg, type: 'success', customClass: 'zZindex'});

            }
            this.loading = false
          })
        })
      },
      informedReset() {
        this.informed.informed = false
        this.existData = []
        this.informed.usersInfo = []
      },
      handleReset(name) {
        this.handlerModel = false
        this.informed.informed = false
        this.informed.opinion = ''
        this.informedReset()
        this.loading = false;
        if (name == 'task') {
          this.task.opinion = ""
          this.task.priority = '50'
          this.task.taskTitle = JSON.parse(JSON.stringify(this.tmpTaskInfo)).taskTitle
        }
        if (name == 'transferTask') {
          this.handleTransferTaskReset()
        }
        if (name == 'addUserTask') {
          this.handleAddUserTaskReset()
        }
        if (name == 'flw_fawen_add') {
          this.handleAddFaWenReset()
        }
        if (name == 'addNode') {
          this.handleAddNodeReset()
        }
        if (name == 'transactionUrge') {
          this.handleTransactionUrgeReset()
        }
        if (name == 'addSign') {
          this.handleAddSignReset()
        }
        if (name == 'agreeAdHocSubProcess') {
          this.agreeAdHocSubProcess.show = false;
        }
        if (name == 'backToNode') {
          this.handleBackToNodeReset()
        }
        if (name == 'taskSequence') {
          this.handlerSequenceModel = false
        }
      },
      handleTransferTaskReset() {
        this.transferTask.usersInfo = {}
        this.singleUserData = {}
        this.transferTask.option = ''
        this.transferTask.model = false
      },
      //添加处理人
      handleAddUserTaskReset() {
        this.addUserTask.usersInfo = {}
        this.singleUserData = {}
        this.addUserTask.option = ''
        this.addUserTask.model = false
      },
      handleAddFaWenReset() {
        this.faWenAdd.model = false
        this.faWenAddForm.sequenceNode = []
        this.faWenAdd.index = 0
      },
      handleBackToNodeReset() {
        this.backToNodeForm.usersInfo = {}
        this.backToNodeForm.show = false
        this.backToNodeForm.option = ''
        this.backToNodeForm.newActivityId = ''
        this.singleUserData = {}
      },
      handleTransactionUrgeReset() {
        this.transactionUrge.usersInfo = {}
        this.singleUserData = {}
        this.transactionUrge.newActivityId = ''
        this.transactionUrge.option = ''
        this.transactionUrge.show = false
      },
      handleAddNodeReset() {
        this.singleUserData = {}
        this.addNode.nextId = ''
        this.addNode.userTaskName = ''
        this.addNode.show = false
      },
      handleAddSignReset() {
        this.addSign.usersInfo = []
        this.addSign.userTaskName = ''
        this.addSign.nextId = ''
        this.addSign.doUserId = ''
        this.addSign.show = false
        this.existData = []
      },
      informedHandler() {
        this.informedTask()
      },
      transferTaskHandler() {
        this.transferTaskAction()
      },
      addUserTaskHandler() {
        this.addUserTaskAction()
      },

      action: function (action, type) {
        if (typeof action === 'object') {
          this.alias = action.alias
        } else {
          this.alias = action
        }
        if (type) {
          this.getFormData()
          this.alias = "sequence";
          const obj = JSON.parse(JSON.stringify(this.nextNode))
          this.taskSequenceForm.taskTitle = this.task.taskTitle;

          var sequenceNode = [];
          obj.forEach((item, index, array) => {
            //执行代码
            if (item.taskId == action.targetRef) {
              sequenceNode.push(item);

            }
          })
          this.sequenceNode = sequenceNode;

          this.handlerSequenceModel = true;
        } else {
          switch (this.alias) {
            case 'agree':// 普通任务正常办理

              this.task.action = 'agree'
              this.task.actionName = 'agree'
              this.task.formType = 'inner'
              this.getFormData()
              this.getBpmVarList()
              this.handlerModel = true
              break
            case 'pass':// 多实例通过

              this.task.action = 'pass'
              this.task.actionName = 'pass'
              this.task.formType = 'inner'
              this.getFormData()
              this.handlerModel = true
              break
            case 'unPass':// 多实例不通过

              this.task.action = 'unPass'
              this.task.actionName = 'unPass'
              this.task.formType = 'inner'
              this.getFormData()
              this.handlerModel = true
              break
            case 'informed':
              this.informed.informed = true
              break
            case 'agreeAdHocSubProcess':
              this.getFormData()
              this.agreeAdHocSubProcess.show = true;
              break
            case 'transferTask':
              this.transferTask.model = true
              break
            case 'invalid':
              this.invalidTaskAction()
              break
            case 'headmap':
              this.headMapAction()
              break
            case 'flowImage':
              this.flowImageAction()
              break
            case 'approvalHistory':
              this.opinionAction()
              break
            case 'transactionUrge':

              this.transactionUrgeAction()
              break
            case 'addNode':
              this.addNodeAction()
              break
            case 'addSignNode':

              this.addSignNode()
              break
            case 'saveDraft':
              this.saveAction()
              break
            case 'backToNode':

              this.backToNodeAction()
              break
            case 'print':

              window.print()
              break
            case 'addUser':

              this.addUserTask.model = true
              break
            case 'revisit':
              var    url = process.env.VUE_APP_BASE_BPM_API + "revisit/viewer.html" + "?t=" + new Date().getTime()+"&taskId="+this.taskId;
              this.revisit.modelerSrc = url
              this.revisit.model = true
              break
            case 'flw_fawen_add'://发文下发任务
             var taskId=  this.task.taskId;
              this.faWenAddForm.taskId=taskId
              getNextNodeFaWen(taskId).then(res => {
                if (res && res.code==0){
                  this.faWenAddForm.sequenceNode=res.data
                  this.faWenAdd.model = true

                }
              })
                .catch(() => {

                })

              break
            case 'flw_fawen_agree'://发文下办理
             var taskId=  this.task.taskId;
              completeActivity(taskId).then(res => {
                if (res && res.code==0){
                  this.$message({"duration": '800', message: '操作成功', type: 'success', customClass: 'zZindex'});



                }else{

                }
                this.go()
              })
                .catch(() => {

                })

              break
            case 'flw_fawen_target_only'://发文下办理
             var taskId=  this.task.taskId;
              completeActivityOrNo(taskId).then(res => {
                if (res && res.code==0){
                  this.$message({"duration": '800', message: '操作成功', type: 'success', customClass: 'zZindex'});



                }else{

                }
                this.go()
              })
                .catch(() => {

                })

              break
            case 'flw_fawen_target_sign_only'://发文下办理
             var taskId=  this.task.taskId;
              completeActivitySignOnly(taskId).then(res => {
                if (res && res.code==0){
                  this.$message({"duration": '800', message: '操作成功', type: 'success', customClass: 'zZindex'});



                }else{

                }
                this.go()
              })
                .catch(() => {

                })

              break
            default:
              this.task.action = 'agree'
              this.task.actionName = 'agree'
              this.task.formType = 'inner'
              this.getFormData()
              this.handlerModel = true
          }
        }


      },
      backToNodeAction: function () {
        getBackNode(this.taskId).then((response) => {
          if (response.code == 0) {
            this.backToNodeForm.nodeArray = response.data
          }
          this.backToNodeForm.show = true
        })
        this.backToNodeForm.taskTitle = this.task.taskTitle
        // getBackNode
      },
      saveAction: function () {
        var obj = {}
        obj['taskId'] = this.taskId
        const that = this
        this.getFormData()
        setTimeout(function () {
          var formData = that.task.formData
          obj['formData'] = formData
          saveform(obj).then((response) => {
            if (response.code == 0) {
              that.$message({"duration": '800', message: '保存成功', type: 'success', customClass: 'zZindex'});


            }
          })
        }, 300)
      },
      addNodeAction: function () {
        this.handleReset('addNode')
        getOutgoingFlows(this.taskId).then((response) => {
          if (response.code == 0) {
            this.transactionUrgeData.nodeArray = response.data
            this.transactionUrge.taskTitle = this.task.taskTitle
            this.addNode.show = true

          }
        })

      },
      addSignNode: function () {
        this.handleAddSignReset()
        getOutgoingFlows(this.taskId).then((response) => {
          if (response.code == 0) {
            this.transactionUrgeData.nodeArray = response.data
            this.transactionUrge.taskTitle = this.task.taskTitle
            this.addSign.show = true
          }
        })
      },
      transactionUrgeAction: function () {
        getTransactionUrge(this.taskId).then((response) => {
          if (response.code == 0) {
            this.transactionUrgeData.nodeArray = response.data
            this.transactionUrge.taskTitle = this.task.taskTitle
            this.transactionUrge.show = true
          }
        })
      },
      opinionAction: function () {
        this.opinion.show = true
        opinionTask(this.processInstanceId).then((response) => {
          if (response.code == 0) {
            this.opinion.tableData = response.data
          }
        })
      },
      headMapAction: function () {
        var url = this.headMap.base + this.processDefinitionId + '&t=' + new Date().getTime();
        this.headMap.src = url
        this.headMap.show = true
      },
      flowImageAction: function () {
        var url = this.flowImage.base + this.processInstanceId + '&t=' + new Date().getTime();
        this.flowImage.src = url;
        this.flowImage.show = true
      },
      invalidTaskAction: function () {
        invalidTask(this.taskId).then((response) => {
          if (response.code == 0) {
            this.$message({"duration": '800', message: '作废成功', type: 'success', customClass: 'zZindex'});

            const that = this
            setTimeout(function () {
              that.go()
            }, 300)
          }
        })
      },
      go: function () {
        this.handlerModel = false

        if (Boolean(this.monitor)) {
          //流程监控过来的
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.push({name: 'cockpitTaskIndex', query: {t: new Date().getTime()}})
          return
        }
        // 调用全局挂载的方法
        if (this.fromIndex) {
          //首页过来的
          this.jsonData = {}
          this.editData = {}
          this.fromIndex = false;
          this.$emit('closeEvent', true)
        } else {

          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.push({name: 'myTask', query: {t: new Date().getTime()}})
        }

      },
      getNextNode: function () {
        getNextNode(this.taskId).then((response) => {
          if (response.code == 0) {
            this.nextNode = response.data
            this.task.nextNode = response.data
            this.existData = [];
            this.existData = this.task.nextNode
            this.agreeAdHocSubProcess.nextNode = response.data;
            var data = response.data;
            var nextNodeName = [];
            var nextNodeNameOptions = [];
            for (let i = 0; i < data.length; i++) {
              var d = data[i];
              nextNodeName.push(d.taskName)
              nextNodeNameOptions.push(d.taskName)

            }
            this.agreeAdHocSubProcess.nextNodeName = nextNodeName;
            this.agreeAdHocSubProcess.nextNodeNameOptions = nextNodeNameOptions;
            if (this.nextNode.length == 0) {
              this.nextNode.push({
                "taskId": "",
                "taskName": "等待其他任务汇总",
                "nodeType": "userTask",
              });
            }

          }
        })
      },
      renderAttachmentByTaskId: function (id) {
        try {
          this.attachmentForm.taskId = id;
          renderAttachmentByTaskId(id).then((response) => {
            if (response.code == 0) {
              var data = response.data;
              this.bpmTaskAttachment = data;
              if (response.bpmTaskAttachment) {
                this.attachmentForm.id = response.bpmTaskAttachment.id;
                this.attachmentForm.createBy = response.bpmTaskAttachment.createBy
                this.attachmentForm.createTime = response.bpmTaskAttachment.createTime
                this.attachmentForm.procDefId = response.bpmTaskAttachment.procDefId
                this.attachmentForm.changeContent = response.bpmTaskAttachment.changeContent
                this.attachmentForm.taskId = response.bpmTaskAttachment.taskId
                this.attachmentForm.processInstanceId = response.bpmTaskAttachment.processInstanceId
                this.fileList = response.bpmTaskAttachment.bpmTaskAttachmentDetailedList
              }
            } else {
            }
          })
        } catch (e) {

        }
      },
      renderApproval: function () {
        try {
          getApprovalOfMe().then((response) => {
            if (response.code == 0) {
              var data = response.data;
              this.approval=data;

            } else {
            }
          })
        } catch (e) {

        }
      },
      renderByTaskId: function (id) {
        try {
          renderByTaskId(id).then((response) => {
            if (response.code == 0) {
              if (response.data) {
                this.jsonData = JSON.parse(response.data)
              }
              if (response.editData) {
                this.editData = JSON.parse(response.editData)

              }
            } else {
              this.go()
            }
          })
        } catch (e) {

        }
      },
      renderBpmTaskAttachment: function (processInstanceId) {
        var url = this.flowImage.base + processInstanceId + '&t=' + new Date().getTime();
        this.viewImageModelerTmpSrc = url;
      },
      getTaskInfo(id){
        getTaskInfo(id).then((response) => {
          if (response.code == 0) {
           var data= response.data
            this.taskData.name=data.name
            this.taskData.taskId=id
             this.taskData.priority=data.priority
             this.taskData.stopTime=data.dueDate
             this.taskData.description=data.description
             this.taskData.startTime=data.createTime
            this.taskData.mainUser.realname=data.ucUsersAssignee.fullname
            this.taskData.mainUser.img=data.ucUsersAssignee.photo
            this.taskData.mainUser.userId=data.ucUsersAssignee.userNo
            if(data.ucUsers){
              var ownerUserList=[]
              for (var i = 0; i <data.ucUsers.length ; i++) {
                var t= {
                  "userId":data.ucUsers[i].userNo,
                   "img":data.ucUsers[i].photo,
                   "realname":data.ucUsers[i].fullname
                 }
                ownerUserList.push(t)
              }
            }
            this.taskData.ownerUserList=ownerUserList
          }

          });
      },
      getTaskBtn: function (id) {
        try {
          getTaskBtn(id).then((response) => {
            if (response.code == 0) {
              this.taskBtns = response.data
              this.multiInstanceTaskBtns = response.multiInstance
              this.taskSequence = response.sequence
              this.isSpinShow = false
              var taskTitle = response.taskTitle
              var processDefinitionId = response.processDefinitionId
              this.processDefinitionId = processDefinitionId
              var processInstanceId = response.processInstanceId
              if (processInstanceId) {
                this.renderBpmTaskAttachment(processInstanceId)
              }
              this.processInstanceId = processInstanceId
              this.task.taskTitle = taskTitle
              this.tmpTaskInfo.taskTitle = taskTitle
              this.informed.taskTitle = taskTitle
              this.agreeAdHocSubProcess.taskTitle = taskTitle
            } else {
            }
          })
        } catch (e) {
        }
      },
      /**
       * 动画完成方法
       */
      viewAfterEnter() {
        if (this.id) {
          this.getDetail()
          this.getCommentList()
          this.getActivityList()
        }
      },

      initInfo() {
        this.taskData = null
        this.subTaskDoneNum = 0
        this.addDescriptionShow = false
        this.priorityVisible = false
        this.addSubtasks = true
        this.nameVinput = false
        this.addDescriptionTextarea = ''
        this.addComments = false
        // 设置关联项列表
        this.allData = {
          business: [],
          contacts: [],
          contract: [],
          customer: []
        }

        this.relatedID = ''
        this.showRelatedDetail = false

        this.activityList = []
        this.fileList = []
        this.replyList = []
      },

      /**
       * 详情
       */
      getDetail() {
        this.loading = true
        const request = this.isTrash ? detailsTrashTaskAPI : detailsTaskAPI
        request({ taskId: this.taskId })
          .then(res => {
            const taskData = res.data
            taskData.checked = taskData.status == 5

            if (taskData.childTask) {
              for (const item of taskData.childTask) {
                if (item.status == 5) {
                  item.checked = true
                  this.subTaskDoneNum++
                } else {
                  item.checked = false
                }
              }
            }
            this.fileList = taskData.file || []

            this.allData = {
              business: (taskData.businessList || []).map(item => {
                if (item.id) {
                  item.businessId = item.id
                }
                return item
              }),
              contacts: (taskData.contactsList || []).map(item => {
                if (item.id) {
                  item.contactsId = item.id
                }
                return item
              }),
              contract: (taskData.contractList || []).map(item => {
                if (item.id) {
                  item.contractId = item.id
                }
                return item
              }),
              customer: (taskData.customerList || []).map(item => {
                if (item.id) {
                  item.customerId = item.id
                }
                return item
              })
            }
            this.taskData = taskData
            this.loading = false
          })
          .catch(error => {
            this.loading = false
            if (error && error.msg == '没有权限') {
              this.canShowDetail = false
            } else {
              this.closeBtn()
            }
          })
      },

      /**
       * 活动信息
       */
      getActivityList() {
        queryLogTaskAPI({
          taskId: this.taskId
        })
          .then(res => {
            this.activityList = res.data
          })
          .catch(() => {})
      },

      /**
       * 评论信息
       */
      getCommentList() {
        queryCommentListAPI({
          typeId: this.id,
          type: 1 // 1是任务 2 是日志
        })
          .then(res => {
            this.replyList = res.data
          })
          .catch(() => {})
      },

      /**
       * 完成任务
       */
      completeMainTask(val) {
        this.taskData.checked = val
        workTaskStatusSetAPI({
          taskId: this.taskId,
          status: this.taskData.checked ? 5 : 1
        })
          .then(res => {
            this.$emit('on-handle', {
              type: 'title-check',
              value: val,
              index: this.detailIndex,
              section: this.detailSection
            })
            // this.$store.dispatch('GetOAMessageNum', 'task')
          })
          .catch(() => {
            // this.$emit('on-handle', {
            //   type: 'title-check',
            //   value: !this.taskData.checked,
            //   index: this.detailIndex,
            //   section: this.detailSection
            // })
            this.taskData.checked = !this.taskData.checked
          })
      },

      /**
       * 编辑任务标题
       */
      editTaskName() {
        if (this.getPermission('setTaskTitle')) {
          this.nameVinput = true
          this.taskDataName = this.taskData.name
        }
      },

      /**
       * 编辑任务描述
       */
      editTaskDescription() {
        if (this.getPermission('setTaskDescription')) {
          this.addDescriptionShow = true
          this.addDescriptionTextarea = this.taskData.description
        }
      },

      /**
       * 获取权限
       */
      getPermission(key) {
        if (!this.workId) {
          return true
        }

        const permission = this.taskData ? this.taskData.authList.project || {} : {}
        return !!permission[key]
      },

      /**
       * 关闭
       */
      closeBtn() {
        this.$emit('close')
      },

      /**
       * 紧急按钮
       */
      priorityBtn(value, def) {
        this.taskData.priority = value.id
        workTaskPrioritySetAPI({
          taskId: this.taskId,
          priority: value.id
        })
          .then(res => {
            this.$emit('on-handle', {
              type: 'change-priority',
              value: value,
              index: this.detailIndex,
              section: this.detailSection
            })
            this.priorityVisible = false
          })
          .catch(() => {
            this.$message.error('编辑失败')
            this.taskData.priority = def
          })
      },
      // 更多 ———— 删除和规定按钮
      moreDelete() {
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'is-particulars'
        })
          .then(() => {
            workTaskDeleteAPI(this.id)
              .then(res => {
                this.$message.success('删除成功')
                this.$emit('on-handle', {
                  type: 'delete',
                  index: this.detailIndex,
                  section: this.detailSection
                })
                this.$emit('close')
              })
              .catch(() => {})
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      moreArchive() {
        this.$confirm('此操作将归档该任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'is-particulars'
        })
          .then(() => {
            workTaskArchiveAPI(this.id)
              .then(res => {
                this.$message.success('操作成功')
                this.$emit('on-handle', {
                  type: 'delete',
                  index: this.detailIndex,
                  section: this.detailSection
                })
                this.$emit('close')
              })
              .catch(() => {})
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      // 附件 -- 上传
      httpRequest(val) {
        this.$wkUploadFile.upload({
          file: val.file,
          params: {
            batchId: this.taskData.batchId
          }
        }).then(({ res }) => {
          const data = res.data || {}
          this.fileList.push(data)
          // this.$emit('httpRequest', this.taskData)
          this.$message.success('上传成功')
        }).catch(() => {})
      },
      // 附件删除
      accessoryDeleteFun(index, item) {
        this.fileList.splice(index, 1)
      },
      // 子任务 -- 勾选
      subtasksCheckbox(val, e) {
        if (e) {
          this.$set(val, 'checked', true)
          this.subTaskDoneNum++
        } else {
          this.$set(val, 'checked', false)
          this.subTaskDoneNum--
        }
        // this.$emit('on-handle', {
        //   type: 'change-sub-task',
        //   value: {
        //     subdonecount: this.subTaskDoneNum,
        //     allcount: this.taskData.childTask.length
        //   },
        //   index: this.detailIndex,
        //   section: this.detailSection
        // })

        workTaskChildStatusSetAPI({
          taskId: val.taskId,
          status: e ? 5 : 1
        })
          .then(res => {
            this.$emit('on-handle', {
              type: 'change-sub-task',
              value: {
                subdonecount: this.subTaskDoneNum,
                allcount: this.taskData.childTask.length
              },
              index: this.detailIndex,
              section: this.detailSection
            })
          })
          .catch(() => {
            this.$message.error('子任务标记失败')
            if (e) {
              this.$set(val, 'checked', false)
              this.subTaskDoneNum--
            } else {
              this.$set(val, 'checked', true)
              this.subTaskDoneNum++
            }
            // this.$emit('on-handle', {
            //   type: 'change-sub-task',
            //   value: {
            //     subdonecount: this.subTaskDoneNum,
            //     allcount: this.taskData.childTask.length
            //   },
            //   index: this.detailIndex,
            //   section: this.detailSection
            // })
            // this.$emit('', val, e)
          })
      },
      /**
       * 参与人操作
       */
      editOwnerList(users, dep) {
        workTaskOwnerUserSetAPI({
          taskId: this.taskId,
          ownerUserId: users
            .map(item => {
              return item.userId
            })
            .join(',')
        })
          .then(res => {
            this.taskData.ownerUserList = users
          })
          .catch(() => {})
      },

      /**
       * 参与人删除按钮
       */
      deleteOwnerList(item, index) {
        workTaskOwnerUserDeleteAPI({
          taskId: this.taskId,
          userId: item.userId
        })
          .then(res => {
            this.taskData.ownerUserList.splice(index, 1)
          })
          .catch(() => {})
      },

      /**
       * 编辑负责人
       */
      mainUserChange(data) {
        const mainUser = data.value.length > 0 ? data.value[0] : null
        this.submiteMainUser(mainUser)
      },

      /**
       * 上传负责人信息
       */
      submiteMainUser(mainUser) {
        workTaskMainUserSetAPI({
          taskId: this.taskId,
          userId: mainUser ? mainUser.userId : ''
        })
          .then(res => {
            if (mainUser) {
              this.$set(this.taskData, 'mainUser', mainUser)
            } else {
              this.$set(this.taskData, 'mainUser', null)
            }

            this.$emit('on-handle', {
              type: 'change-main-user',
              value: mainUser,
              index: this.detailIndex,
              section: this.detailSection
            })
          })
          .catch(() => {})
      },

      /**
       * 编辑任务名
       */
      submiteTaskName(val) {
        workTaskTitleSetAPI({
          name: val,
          taskId: this.taskId
        })
          .then(res => {
            this.nameVinput = false
            // this.$emit('saveName', val)
            this.$emit('on-handle', {
              type: 'change-name',
              value: val,
              index: this.detailIndex,
              section: this.detailSection
            })
            this.taskData.name = val
          })
          .catch(() => {})
      },

      /**
       * 截至日期API
       */
      deleteTime(type) {
        this.taskData[type] = ''
        this.timeChange(type)
      },

      timeChange(type) {
        const params = { taskId: this.taskId }
        params[type] = this.taskData[type]
        workTaskTimeSetAPI(params)
          .then(res => {
            // 停止时间回调
            if (type == 'stopTime') {
              this.$emit('on-handle', {
                type: 'change-stop-time',
                value: this.taskData[type],
                index: this.detailIndex,
                section: this.detailSection
              })
            }
          })
          .catch(() => {})
      },

      /**
       * 描述提交按钮
       */
      submiteDescription() {
        workTaskDescriptionSetAPI({
          taskId: this.taskId,
          description: this.addDescriptionTextarea
        })
          .then(res => {
            this.addDescriptionShow = false
            this.$set(this.taskData, 'description', this.addDescriptionTextarea)
            this.addDescriptionTextarea = ''
          })
          .catch(() => {})
      },

      /**
       * 评论发布
       */
      handleReply(data) {
        if (data) {
          this.commentsLoading = true

          setCommentAPI({
            typeId: this.id,
            type: 1,
            content: xss(data)
          })
            .then(res => {
              res.data.childCommentList = []
              res.data.user = {
                userId: this.userInfo.id,
                realname: this.userInfo.realname,
                img: this.userInfo.img
              }
              this.$refs.f_reply.commentsTextarea = ''
              this.replyList.push(res.data)
              this.$emit('on-handle', {
                type: 'change-comments',
                value: 'add',
                index: this.detailIndex,
                section: this.detailSection
              })
              this.commentsLoading = false
            })
            .catch(() => {
              this.commentsLoading = false
            })
        }
      },

      deleteComment(index) {
        this.replyList.splice(index, 1)
      },

      // 删除评论
      discussDelete(val, items, index) {
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'is-particulars'
        })
          .then(() => {
            deleteCommentAPI({
              commentId: val.commentId
            })
              .then(res => {
                items.splice(index, 1)
                this.$emit('on-handle', {
                  type: 'change-comments',
                  value: 'delete',
                  index: this.detailIndex,
                  section: this.detailSection
                })
              })
              .catch(() => {})
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },

      // 相关信息提交按钮
      checkInfos(val, alldata) {
        editTaskRelationAPI({
          taskId: this.taskId,
          customerIds:
            val.customerIds && val.customerIds.length
              ? ',' + val.customerIds.join(',') + ','
              : '',
          contactsIds:
            val.contactsIds && val.contactsIds.length
              ? ',' + val.contactsIds.join(',') + ','
              : '',
          businessIds:
            val.businessIds && val.businessIds.length
              ? ',' + val.businessIds.join(',') + ','
              : '',
          contractIds:
            val.contractIds && val.contractIds.length
              ? ',' + val.contractIds.join(',') + ','
              : ''
        })
          .then(res => {
            this.$message.success('关联成功')
            this.allData = alldata
            this.$emit('on-handle', {
              type: 'relation-business',
              index: this.detailIndex,
              section: this.detailSection
            })
          })
          .catch(() => {})
      },

      /**
       * 解绑详情信息
       */
      unbindRelatedInfo(field, item, index) {
        this.$confirm('确认取消关联?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'is-particulars'
        })
          .then(() => {
            const params = { taskId: this.taskData.taskId }
            const tempRelatedListData = objDeepCopy(this.allData)
            tempRelatedListData[field].splice(index, 1)
            const showTypes = ['customer', 'contacts', 'business', 'contract']
            for (let index = 0; index < showTypes.length; index++) {
              const typeItem = showTypes[index]
              const typeArray = tempRelatedListData[typeItem] || []
              params[typeItem + 'Ids'] = typeArray
                .map(aItem => {
                  return aItem[typeItem + 'Id']
                })
                .join(',')
            }

            editTaskRelationAPI(params)
              .then(res => {
                this.allData = tempRelatedListData
                this.$message.success('关联取消成功')
              })
              .catch(() => {})
          })
          .catch(() => {
            this.$message.info('已取消操作')
          })
      },

      /**
       * 查看相关详情
       */
      checkRelatedDetail(crmType, item) {
        this.relatedID = item.key
        this.relatedCRMType = crmType
        this.showRelatedDetail = true
      },

      /**
       * 删除任务
       */
      deleteSubTask(val) {
        this.$confirm('此操作将删除该任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'is-particulars'
        })
          .then(() => {
            workSubTaskDeleteAPI(val.taskId)
              .then(res => {
                const subData = this.taskData.childTask
                for (const i in subData) {
                  if (subData[i].taskId == val.taskId) {
                    subData.splice(i, 1)
                    break
                  }
                }
                if (val.checked) {
                  this.subTaskDoneNum--
                }

                this.$emit('on-handle', {
                  type: 'change-sub-task',
                  value: {
                    subdonecount: this.subTaskDoneNum,
                    allcount: this.taskData.childTask.length
                  },
                  index: this.detailIndex,
                  section: this.detailSection
                })
                this.$message.success('子任务删除成功')
              })
              .catch(() => {
                this.$message.error('子任务删除失败')
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },

      /**
       * 编辑子任务
       */
      editSubTask(val) {
        this.subTaskID = val.taskId
        const dataList = this.taskData.childTask
        for (const i in dataList) {
          if (dataList[i].taskId == val.taskId) {
            this.$set(dataList[i], 'showEdit', true)
          } else {
            this.$set(dataList[i], 'showEdit', false)
          }
        }
      },

      /**
       * 子任务回调
       */
      handleSubTasksBlock(data, item) {
        if (data.type == 'edit') {
          this.$set(item, 'showEdit', false)
        } else if (data.type == 'add') {
          this.addSubtasks = true
          if (data.result == 'success') {
            this.$emit('on-handle', {
              type: 'change-sub-task',
              value: {
                subdonecount: this.subTaskDoneNum,
                allcount: this.taskData.childTask.length
              },
              index: this.detailIndex,
              section: this.detailSection
            })
          } else {
            this.$emit('on-handle', {
              type: 'change-sub-task',
              value: {
                subdonecount: this.subTaskDoneNum,
                allcount: this.taskData.childTask.length
              },
              index: this.detailIndex,
              section: this.detailSection
            })
          }
        } else if (data.type == 'cancel') {
          if (item) {
            this.$set(item, 'showEdit', false)
          } else {
            this.addSubtasks = true
          }
        }
      },

      /**
       * 删除截止时间
       */
      deleteTimeTop() {
        workTaskTimeSetAPI({
          taskId: this.taskId,
          stopTime: ''
        })
          .then(res => {
            this.$set(this.taskData, 'stopTime', '')
            this.$emit('on-handle', {
              type: 'stop-time',
              index: this.detailIndex,
              section: this.detailSection
            })
          })
          .catch(() => {})
      },

      /**
       * 激活任务
       */
      activateTask() {
        this.loading = true
        workTaskRecoverAPI(this.taskData.taskId)
          .then(res => {
            this.loading = false
            this.$emit('on-handle', {
              type: 'activate-task',
              index: this.detailIndex,
              section: this.detailSection
            })
            this.closeBtn()
          })
          .catch(() => {
            this.loading = false
          })
      },

      /**
       * 激活任务
       */
      recoverTask() {
        this.loading = true
        workTrashRecoverAPI(this.taskData.taskId)
          .then(res => {
            this.loading = false
            this.$message.success('恢复成功')
            this.$emit('on-handle', {
              type: 'recover-task',
              index: this.detailIndex,
              section: this.detailSection
            })
            this.closeBtn()
          })
          .catch(() => {
            this.loading = false
          })
      },

      /**
       * 激活任务
       */
      thoroughDeleteTask() {
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.loading = true
            workTrashDeleteAPI(this.taskData.taskId)
              .then(res => {
                this.loading = false
                this.$emit('on-handle', {
                  type: 'thorough-delete-task',
                  index: this.detailIndex,
                  section: this.detailSection
                })
                this.closeBtn()
              })
              .catch(() => {
                this.loading = false
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },

      /**
       * 任务头部操作
       */
      morkDropdownClick(command) {
        this.moreDelete()
      },

      /**
       * 关闭页面
       */
      hideView() {
        this.$emit('close')
        this.$emit('hide-view')
      },

      /**
       * 日志评论
       */

      closeOtherReply(flag) {
        if (!flag && this.$refs.comment_list) {
          this.$refs.comment_list.closeReply()
        }
      }

    }

  }

</script>
<style lang="scss" scoped>
  .xr-btn--green {
    background-color: #389E0B;
    border-color: #389E0B;

    i {
      font-size: 13px;
      margin-right: 5px;
    }
  }

  .xr-btn--green:hover,
  .xr-btn--green.is-disabled,
  .xr-btn--green.is-disabled:hover,
  .xr-btn--green:focus {
    background: #4ca824;
    border-color: #4ca824;
    color: #FFFFFF;
  }
  // 拒绝红
  .xr-btn--red {
    background-color: #f94e4e;
    border-color: #f94e4e;

    i {
      font-size: 13px;
      margin-right: 5px;
    }
  }

  .xr-btn--red:hover,
  .xr-btn--red.is-disabled,
  .xr-btn--red.is-disabled:hover,
  .xr-btn--red:focus {
    background: #fa6060;
    border-color: #fa6060;
    color: #FFFFFF;
  }

  // 按钮橙黄
  .xr-btn--orange {
    background-color: #ff6a00;
    border-color: #ff6a00;

    i {
      font-size: 13px;
      margin-right: 5px;
    }
  }

  .xr-btn--orange:hover,
  .xr-btn--orange.is-disabled,
  .xr-btn--orange.is-disabled:hover,
  .xr-btn--orange:focus {
    background: #fc7d63;
    border-color: #fc7d63;
    color: #FFFFFF;
  }
  .task-card {
    margin-top: 10px;
  }

  .container {
    height: auto !important;
    min-height: 450px;
  }

  .zZindex {
    z-index: 3000 !important;
  }

</style>
<style lang="scss" scoped>
  @import './taskDetail';
 /deep/ .el-dialog__header {
    border-bottom: 1px solid #ebebeb;
  }
  /deep/   .el-dialog__footer {
    border-top: 1px solid #e8eaec;
  }

  // 框架
  .main {
    position: relative;
    height: 100%;
    background: #f5f6f9;

    &__hd {
      margin-bottom: 15px;
    }

    &__bd {
      flex: 1;
      overflow: hidden;

      &--left {
        flex: 1;
        box-shadow: none;
        position: relative;
        overflow-y: auto;
        background-color: white;
        border-right: 1px solid #e6e6e6;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        padding: 20px 30px;
        margin-bottom: 15px;
      }

      &--right {
        /deep/ .el-tabs__item {
          color: #333;
          font-size: 12px;
          top: 2px;
          margin-top: -2px;
        }

        /deep/ .el-tabs__nav-scroll {
          min-height: 39px;
        }

        /deep/ .el-tabs__item.is-active {
          border-top: 2px solid #2362FB;
          color: #333;
        }

        /deep/ .el-tabs {
          box-shadow: none;
          border-right: none;
          height: 100%;
        }

        /deep/ .el-tabs__content {
          height: calc(100% - 40px) !important;
          overflow: auto;
          overflow-y: overlay;
          position: relative;
          .el-tab-pane {
            height: 100%;
          }
        }

        min-width: 300px;
        box-shadow: none;
        flex-shrink: 0;
        height: calc(100% - 15px);
        background-color: white;
        margin-left: 15px;
      }
    }
  }

  //任务详情头
  .task-hd {
    background-color: white;
    padding: 8px 25px 15px;
    border-bottom: 1px solid #e6e6e6;

    &__top {
      font-size: 12px;
      &--create {
        color: #999;
      }

      &--info {
        color: #666;
        margin-right: 8px;
      }

      .xr-btn--green {
        margin-right: 9px;
      }
    }

    &__middle {
      margin-top: 5px;
      .el-checkbox {
        margin-right: 8px;
        margin-top: 5px;
      }
    }

    &__bottom {
      margin-top: 20px;
      color: #666;
      .vux-flexbox-item {
        text-align: left;
        border-left: 1px solid #efefef;
        font-size: 12px;
        padding-left: 20px;

        .priority--icon {
          margin-right: 8px;
        }

        .head-btn__icon {
          margin-right: 12px;
        }

        .vux-flex-row {
          position: relative;
          .el-date-editor {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            z-index: 1;

            /deep/ .el-input__inner {
              border: none;
              background-color: transparent;
              color: transparent;
              cursor: pointer;
            }

            /deep/ .el-input__prefix {
              display: none;
              cursor: pointer;
            }
          }
        }
      }

      .vux-flexbox-item:first-child {
        border-left: none;
      }
    }
  }
  //任务名称
  .task-name {
    flex: 1;
    font-size: 22px;
    color: #333;
    cursor: pointer;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 28px;
    word-break: break-all;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .task-name.is-checked {
    color: #8f8f8f;
    text-decoration: line-through;
  }

  .show-input {
    flex: 1;
    padding-right: 8px;
    .btn-box {
      margin-top: 10px;
    }
  }

  // 优先级
  .priority {
    cursor: pointer;
    &--icon {
      font-size: 12px;
      width: 32px;
      height: 32px;
      text-align: center;
      display: inline-block;
      line-height: 32px;
      color: white;
      border-radius: 16px;
    }
  }

  .priority-select {
    margin: 10px;
    &-item {
      cursor: pointer;
      padding: 5px;
    }

    &-item:hover {
      background-color: #ecf5ff;
    }
  }

  // 操作图标
  .head-btn {
    cursor: pointer;
    position: relative;
    min-height: 34px;

    &__icon {
      font-size: 15px;
      color: #333333;
      border-radius: 16px;
      display: inline-block;
      width: 32px;
      height: 32px;
      line-height: 32px;
      background-color: #eff4ff;
      text-align: center;
      border: 1px solid transparent;
    }

    // 有值效果
    .wk-l-time.is-valve {
      background-color: #f7ad3d;
      color: white;
    }

    .wk-l-minus.is-valve {
      background-color: #f56c6c;
      color: white;
    }

    .user-img {
      margin-right: 12px;
    }

    &__bd {
      flex: 1;
      padding-right: 8px;
      &--title {
        color: #333333;
        font-size: 16px;
        margin-bottom: 3px;
      }

      &--des {
        color: #999;
      }
    }

    &__close {
      flex-shrink: 0;
      color: #999;
      font-size: 16px;
      opacity: 0;
      z-index: 5;
    }

    &__close:hover {
      color: #fa6060;
    }
  }

  .head-btn:hover {
    .head-btn__icon.is-null {
      color:  #2362FB;
      background-color: #eff4ff;
    }

    .head-btn__close {
      opacity: 1;
    }
  }



  // 详情其他模块
  .section {
    padding: 10px 0;

    &__hd {
      span {
        font-size: 16px;
        color: #333;
        font-weight: 600;
      }
      .wk {
        color: #363636;
        font-size: 15px;
        margin-right: 5px;
      }
    }

    &__bd {
      margin-top: 15px;
      padding-left: 25px;
    }
  }

  .secitons {
    position: relative;
    margin-top: 15px;
  }


  // 活动

  .activity-cells {
    .activity-cell {
      padding: 10px 0;
      color: #333;

      .user-img {
        margin-right: 10px;
        flex-shrink: 0;
      }

      &__bd {
        flex: 1;
        margin-top: 3px;
        .activity-info {
          &--name {
            font-size: 14px;
            color: #333;
            margin-right: 5px;
            font-weight: 600;
          }

          &--time {
            font-size: 12px;
            color: #999;
          }
        }

        .activity-content {
          margin-top: 5px;
          font-size: 14px;
          color: #666;
          line-height: 17px;
          white-space: pre-wrap;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
    }
  }

  // 评论
  .comment-cells {
    height: 100%;
    .comment-list {
      flex: 1;
      overflow: auto;
      /deep/ .user-info {
        .user-img {
          width: 26px;
          height: 26px;
          border-radius: 13px;
          margin-right: 10px;
        }

        .user {
          font-size: 14px;
          color: #333;
          font-weight: 600;
        }
      }

      /deep/ .reply {
        border-bottom: none;
        padding: 0 0 20px;
        .content {
          margin-left: 40px;
        }

        .child-content {
          margin-top: 5px;
          margin-left: 40px;
        }
      }

      /deep/ .reply:hover {
        background-color: white;
      }
    }

    .reply-comment {
      flex-shrink: 0;
      margin-top: 15px;
    }
  }

  .d-view {
    position: fixed;
    background: white;
    min-width: 926px;
    width: 75%;
    top: 60px;
    bottom: 0px;
    right: 0px;
  }
</style>
